Archived topic
FontAwesome?
13 replies · Started by Anonymous on August 5, 2014
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?
Hi Dee,
You can use FontAwesome just like how they show you on their website: http://fortawesome.github.io/Font-Awesome/
Hope this helps :)
Tom
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.
FROM FONTAWESOME
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.
Just found the edit.
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.
Can we say "overthinking," boys and girls? :)
Got it. Thanks, Tom.
No problem :)
Anyone have a demo on how you would use FontAwesome with GeneratePress?
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 :)
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.
Hi there,
Can you open a new topic and link us to the page in question?
This thread is from 2014.
Thanks!
will do.
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:some@email.com"> some@email.com</a>Alternative: "fa fa-clock", "fas fa...", "far fa..."
Not sure what you mean.
For the prefix like far to work, you will need FontAwesome 5:
https://docs.generatepress.com/article/font-awesome/#font-awesome-5
If this doesn't help, any chance you can open a new topic and explain a bit more?
Thanks!