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

Home Forums Support How to display other icons / fonts besides the magnifying glass?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1437377
    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?

    #1437387
    Elvin
    Customer Support

    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:
    font icon

    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. 🙂

    #1437392
    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.

    #1437464
    Elvin
    Customer Support

    <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 🙂

    #1437471
    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?

    #1438058
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.