- This topic has 13 replies, 6 voices, and was last updated 4 years ago by Leo.
August 5, 2014 at 7:10 am #9451Dee
Hi, I see that you say FontAwesome is integrated in your features. I’ve never used it, but would like to. I looked at their information on how to get started but I feel like I’m missing something. Do you have some basic instructions of how to start using FontAwesome with GeneratePress?August 5, 2014 at 7:59 am #9452TomLead DeveloperLead Developer
You can use FontAwesome just like how they show you on their website: http://fortawesome.github.io/Font-Awesome/
Hope this helps 🙂
TomAugust 5, 2014 at 5:21 pm #9513Dee Broughton
No, it doesn’t really help. It appears that this (below) would be relevant, right? But the details I need to make sense of it are missing, even though I’ve looked several times. If you can point me in the right direction, I’ll be able to figure it out.
EASY: Default CSS
Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.
Copy the entire font-awesome directory into your project [INTO WHAT DIRECTORY? “PROJECT” IS VAGUE.].
In the <head> of your html [INTO WHICH OF THE GEN FILES OR IS THIS THE PART YOU’VE DONE TO MAKE GEN READY?], reference the location to your font-awesome.min.css.
<link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>
Check out the examples to start using Font Awesome!
OK, IN THE EXAMPLES WE SEE…
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon’s name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity…
<i class=”fa fa-camera-retro”></i> fa-camera-retro
BUT I HAVEN’T FOUND REFERENCES TO I-CLASSES THAT WOULD HELP ME MAKE SENSE OF THIS EXAMPLE
I’m sure there’s some obvious pieces of the puzzle missing for me here.August 5, 2014 at 5:24 pm #9514Dee Broughton
Just found the edit.August 5, 2014 at 6:03 pm #9530TomLead DeveloperLead Developer
FontAwesome is already integrated, so you don’t have to include anything in the theme.
You can go here and find the icon you want: http://fortawesome.github.io/Font-Awesome/icons/
Then click it, and copy the little snippet of code they provide where you want the icon to appear.
So for example, this would show a lightning bolt:
<i class="fa fa-bolt"></i> Text next to the icon
They use the i element simply because it’s simple and short – you can use span, or any other inline element.
The important part if the class of fa fa-somename – that’s what attaches the icon to the element.August 5, 2014 at 6:29 pm #9532Dee Broughton
Can we say “overthinking,” boys and girls? 🙂
Got it. Thanks, Tom.August 5, 2014 at 6:32 pm #9533TomLead DeveloperLead DeveloperOctober 16, 2014 at 8:41 am #39513Lon Mok
Anyone have a demo on how you would use FontAwesome with GeneratePress?October 16, 2014 at 12:21 pm #39611TomLead DeveloperLead Developer
Nothing fancy – simply use it as shown on their website and as I showed above.
So, first, find your icon: http://fortawesome.github.io/Font-Awesome/icons/
Find your icon, and click on it.
It will give you some code that looks like this:
<i class="fa fa-bicycle"></i>
Paste that code wherever you want the icon to show up 🙂February 26, 2018 at 2:02 pm #506324sparkle
hi, i have a question about font-awesome… is there anything i have to enable to use them? I’d like to add icons next to some menu items. can i just put ‘fa fa-bicycle’ into the class field on the menu item in that case? i’ve done this and it’s not working for me so i must be missing something. the typography option is enabled.February 26, 2018 at 6:15 pm #506457LeoStaffCustomer SupportFebruary 27, 2018 at 5:07 am #506809sparkle
will do.June 18, 2018 at 1:55 am #602448Cecilio
It does not work for me. Look at the code: Only the email icon is shown, not the clock.
<i class="far fa-clock"></i> <span>Horario de 09:00 a 14:00 y 17:00 a 20:00</span> <a class="fa fa-envelope-o" href="mailto:email@example.com"> firstname.lastname@example.org</a>
Alternative: “fa fa-clock”, “fas fa…”, “far fa…”June 18, 2018 at 10:13 am #602853LeoStaffCustomer Support
Not sure what you mean.
For the prefix like far to work, you will need FontAwesome 5:
If this doesn’t help, any chance you can open a new topic and explain a bit more?
- You must be logged in to reply to this topic.