[Support request] How to display other icons / fonts besides the magnifying glass?

[Luiz Guilherme]

I verified that using the code \f002 the magnifying glass is displayed in the generatepress search field.

Are there other icons like “Telephone“, Etc?

What are the codes of these other items?

[Elvin]

Hi Luiz,

You can use this cheatsheet from FontAwesome.
https://fontawesome.com/cheatsheet

Basing from that sheet, Telephone is /f095.

Before proceeding, you might have to read about this.
https://docs.generatepress.com/article/font-awesome/

and you’ll have to set icon type to Font:

As for actually displaying the icons, you can use the content css property and pseudo-element selector.

Example:

.class:before {
    content: "\f095";
    font-family: FontAwesome;
}

Let us know if it works for you. 🙂

[Luiz Guilherme]

Thanks for the quick return.

I used the code

<i class = “fas fa-phone”> </i>

but I had to add the fontawesome code to the website header.

why wasn’t it necessary to display the magnifying glass?

if it were possible i would like to display it without having to insert this code, gtmetrix tests show that this can slow down the site.

[Elvin]

<i class = “fas fa-phone”> </i>

Yes that’s another way of using it.

but I had to add the fontawesome code to the website header.

fa-phone most likely was not included on the default font files of GeneratePress, hence requiring you to request for the font files externally.

why wasn’t it necessary to display the magnifying glass?

The magnifying glass icon is included the default “GeneratePress” font & svg set.

GP font/icons only include ones that are used throughout the theme/plugin like menu toggle, sub menu arrow, search icon, back to top arrow etc.

if it were possible i would like to display it without having to insert this code,

It’s definitely possible. But this will require you to upload additional fonts that include the icons you want.

…gtmetrix tests show that this can slow down the site.

Yes, it does because the site requests the font files from external source.

Using FA definitely slows down the site a lot. You might want to consider using a service like Icomoon and specifically choose and upload only the icons you will use. This is nice because you don’t have to upload the entire FA library.

Alternatively, you might want to consider using SVG icons.
https://docs.generatepress.com/article/svg-icons/

You can try and search for a free phone SVG icon somewhere on the internet 🙂

[Luiz Guilherme]

Thank you very much for your help, this is very enlightening.

It doesn’t really make sense to load all fonts to use just a few.

I know svg, but if possible I would like to use fonts in this current situation.

Can you point me to some material on how I can upload only the fonts with the desired icons in the same way as they did on generatepress?

[Leo]

Checkout Icomoon first, then the steps here should work:
https://docs.generatepress.com/article/adding-local-fonts/

[Author]

Posts