[Resolved] Add An Icon In Front Of Top Bar Text

[Michelle]

I would like to add an envelope before the text “Get Email Updates” on the top bar. I am used to using Font Awesome, but I read here in the forum that Generate Press doesn’t support Font Awesome out of the box. I would prefer to not use a plugin for only one icon. Is there a simple solution?

This is what I used: <i class=”fas fa-envelope fa-lg”style=”color:#
ffffff”></i>

[Elvin]

Hi there,

The simple solution would be to get the SVG code for it and use that. https://fontawesome.com/icons/envelope

Example: Instead of using the <i>..</i>, use this.
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg>

This is so we don’t have to enqueue or request the whole FontAwesome font file if we only need the envelope icon. 🙂

[Michelle]

That worked! How can I make the icon smaller though? It’s HUGE!

[Elvin]

Try this CSS:

a.wplightbox svg {
    height: 1em;
    width: auto;
}

adjust the height value to your preference. 🙂

[Author]

Posts