Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] FontAwesome?

Home Forums Support FontAwesome?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #9451
    Dee

    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?

    #9452
    Tom
    Lead Developer
    Lead Developer

    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

    #9513
    Dee 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.

    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.

    #9514
    Dee Broughton

    Just found the edit.

    #9530
    Tom
    Lead Developer
    Lead 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.

    #9532
    Dee Broughton

    Can we say “overthinking,” boys and girls? 🙂
    Got it. Thanks, Tom.

    #9533
    Tom
    Lead Developer
    Lead Developer
    #39513
    Lon Mok

    Anyone have a demo on how you would use FontAwesome with GeneratePress?

    #39611
    Tom
    Lead Developer
    Lead 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 🙂

    #506324
    sparkle

    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.

    #506457
    Leo
    Staff
    Customer Support

    Hi there,

    Can you open a new topic and link us to the page in question?

    This thread is from 2014.

    Thanks!

    #506809
    sparkle

    will do.

    #602448
    Cecilio

    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…”

    #602853
    Leo
    Staff
    Customer Support

    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!

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