- This topic has 13 replies, 4 voices, and was last updated 5 years, 8 months ago by David.
-
AuthorPosts
-
April 12, 2018 at 8:09 pm #548922Kamil
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?
April 12, 2018 at 9:09 pm #548971TomLead DeveloperLead DeveloperHi 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 π
April 12, 2018 at 9:33 pm #548983KamilYes, 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?
April 13, 2018 at 9:40 am #549622TomLead DeveloperLead DeveloperMake sure “Load essential icons only” is unchecked in Customize > General.
Let me know π
April 13, 2018 at 4:25 pm #549891Kamilthat did the trick! is it possible to add icons to essential icons, so it won’t load all unnecessary icons?
April 13, 2018 at 9:27 pm #550004TomLead DeveloperLead DeveloperNot 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 π
April 14, 2018 at 6:41 am #550184KamilAlright, thank you!
April 14, 2018 at 8:25 am #550288TomLead DeveloperLead DeveloperNo problem π
July 25, 2018 at 4:43 am #632302EngelbrechtHi Tom, could you help elaborate how i add these icons https://icomoon.io/app/#/select to the mobile header?
July 25, 2018 at 7:24 am #632404DavidStaffCustomer SupportHi 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
July 28, 2018 at 1:48 am #634478EngelbrechtThank 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!July 28, 2018 at 6:16 am #634603DavidStaffCustomer SupportIf 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.
July 30, 2018 at 8:37 am #636150EngelbrechtIm 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)?
July 30, 2018 at 11:33 am #636344DavidStaffCustomer SupportI generally keep SVGS below 3kb – so even 20 would be smaller than FA.
-
AuthorPosts
- You must be logged in to reply to this topic.