[Support request] adding call button to mobile header

Home Forums Support [Support request] adding call button to mobile header

Home Forums Support adding call button to mobile header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #548922
    Kamil

    how do i add “Call” button with icon f095, to the right side of mobile header, so when people click on it, it dials phone number?

    #548971
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You can use a hook for that.

    Take a look here: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

    Let me know if you need more info πŸ™‚

    #548983
    Kamil

    Yes, the hook part I figured, now trying to figure out why the phone icon doesn’t work. I use fa fa-phone as class. Any idea why I might have this issue?

    #549622
    Tom
    Lead Developer
    Lead Developer

    Make sure “Load essential icons only” is unchecked in Customize > General.

    Let me know πŸ™‚

    #549891
    Kamil

    that did the trick! is it possible to add icons to essential icons, so it won’t load all unnecessary icons?

    #550004
    Tom
    Lead Developer
    Lead Developer

    Not currently. However, you can build your own list of icons using a tool like this: https://icomoon.io/app/#/select

    It will give you font files.

    Then you can use @font-face to add the font to your site and display the icons.

    Let me know if you need more info πŸ™‚

    #550184
    Kamil

    Alright, thank you!

    #550288
    Tom
    Lead Developer
    Lead Developer

    No problem πŸ™‚

    #632302
    Engelbrecht

    Hi Tom, could you help elaborate how i add these icons https://icomoon.io/app/#/select to the mobile header?

    #632404
    David
    Staff
    Customer Support

    Hi there,

    you can download you selection from Icomoon as a font, the settings options allows you to name it yourself. Within the package it downloads is a TTF font which can be added like any other font.

    Here are some instructions on adding local fonts:

    https://docs.generatepress.com/article/adding-local-fonts/

    If you only need a few icons then it would be more efficient to download the SVGs and add them with the markup ICO moon provides, or to save them as an SVG image. You will need a plugin for SVG to work e.g Save SVG or SVG Support both are on wordpress dot org

    #634478
    Engelbrecht

    Thank you David,
    Are there any performance improvements using the local fonts instead of Font Awesome as long as i only use the icons i really need? Will they be loaded on all pages? Im planning on dequeing scripts and styles later on pages that do not use js and CSS to intresse performance since im using some heavy plug-ins. Im not sure how many icons ineed yet and im not sure about the security issue regarding svg files but thank you again for suggesting them!

    #634603
    David
    Staff
    Customer Support

    If the file size of your local font is significantly smaller than the Font Awesome package then I would expect to see an improvement. The font should only be requested on the pages it is used.

    The Security risk with SVGs is that they could contain malicious code. So make sure they come from a trust worthy source and all should be fine.

    #636150
    Engelbrecht

    Im really at a crossroad here. My other plugins use font awesome, though i actually dont want it, and im currently getting a logo developed in svg format. I guess ill have to use both, but im not sure of how the FA will impact performance.

    Anyhow, you said, you would go for svg if there are only a few icons. Whats the issue if there are many (10-20)?

    #636344
    David
    Staff
    Customer Support

    I generally keep SVGS below 3kb – so even 20 would be smaller than FA.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.