Font Awesome CSS

[robsonfinancial]

Hello, I want to use Font Awesome in CSS ::before and ::after. Is there a code I can put inside the Content:’’?

[nabeel]

Hi @robsonfinancial,

Thank you for reaching out to us. You can give your element a class e.g font-awesome-element for which you want to use :before and :after and then you can use it like this:

.font-awesome-element:before {

}

or

.font-awesome-element:after {

}

You can find the codes of all icons here https://fontawesome.com/icons?d=gallery. Alternatively you can simply use the icon shortcode see here http://demo.theme.co/integrity-1/shortcodes/icons/

For more details you can also checkout https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Hope this helps!

[robsonfinancial]

h1::before{
content’FONT AWESOME CODE’;
font-weight:500;
Etc…
}

\f2b9 is not working. Nor is the code with your string sequence.

I want to apply icons dynamically to selected elements using CSS.

[friech]

Hi @robsonfinancial,

You can use the Icon Shortcode instead if you want to add icon on your headline (h1).

If that does not achieve what you need, please give us more context of what you’re trying to do so we can have a better idea.

Thanks,

[robsonfinancial]

Hello. Yes. But that means adding code to every h1 element. It can be done with CSS, which is much quicker. Outside of X, you would specify font-family; ‘font awesome 5 free’ and then add \f123 as the content of ::before.

[thai]

Hi @robsonfinancial,

Please try with this custom CSS:

h1::before{
    content: '\f123';
    font-weight: 500;
    font-family: "FontAwesome";
}

If it still doesn’t work, please provide us with your website URL so we can take a closer look.

Thank you.