How to use FONTAWESOME Icons

This topic has 5 replies, 3 voices, and was last updated 6 years, 8 months ago by Artem Temos.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 13, 2018 at 5:12 pm #52424

RobertP
Participant

How does this thing work? I thought that I would just go to https://fontawesome.com/, pick a (free) icon that I like, and insert the name of the icon in the “Icon name (from FontAwesome set)” box when I want to have an icon to a page in my menu.

Please see attached.

For example, fa-tags is this one: https://fontawesome.com/icons/tags?style=solid. And it is not working, nothing appears.

I have found that only a very few icon names work.

However, what actually work are the icon names I found here: https://www.w3schools.com/icons/fontawesome_icons_brand.asp, given as examples. But only if I insert them in the CSS Classes (optional) box.

Could you please explain to me how the fontawesome icons work?

Thank you

Attachments:
You must be logged in to view attached files.

April 13, 2018 at 6:44 pm #52437

Elise Noromit
Member

Hello,

Our theme supports WP Bakery page builder icon http://prntscr.com/j4w9tt Our theme in the elements supports range of https://fontawesome.com/v4.7.0/

You add and configure this element in the following options:
Icon colors: Predefined colors and option to set custom icon color.
Background shape: Circle, Square, Rounded, Outline Circle, Outline Square, Outline Rounded;
Size: Mini, Small, Normal, Large, Extra Large;

Here is the sample of background and shape: http://prntscr.com/j4wg8j

Icon library: Font Awesome; Open Iconic; Typicons; Entypo; Linecons; Mono Social; Material
Icon alignment: Left, Right, Center;
CSS animation Choose, preview (clicking “animate it”) and add animation.

You can also use the search and insert the keyword for icon find easily: http://prntscr.com/j4wep8

Best Regards

April 13, 2018 at 9:18 pm #52461

RobertP
Participant

I’m sorry, I wasn’t very clear. Please see attached to understand what I am referring to about having an icon with the Menu elements. JUst next to the name, not on the page or on the dropdown menu.

Attachments:
You must be logged in to view attached files.

April 14, 2018 at 9:46 am #52491

Elise Noromit
Member

Hello,

The icons on the screen are custom icons. In order to change them, you will need first of all upload your png or svg items to Dashboard > Media.

Next, you navigate to Products > Categories > edit and add them here http://prntscr.com/j54dwt

If you have any questions feel free to contact us.

Best Regards

April 14, 2018 at 10:53 am #52499

RobertP
Participant

Yes, I know about Categories. That’s how I inserted those icons in my attached example above. But what about Pages? Or Custom Links? Because not all elements in my Menu are Categories to have this option.

If I want an icon to a Page or Custom link it can only be done by means of using the Icon name (from FontAwesome set) box or CSS Classes (optional) box. But the problem here is that the font names / classes that I find on http://www.fontawesome.com and insert them in these boxes, DON’T WORK. Am I doing anything wrong or the theme does not support the FontAwesome 5? If it doesn’t, where can I find the good version of FontAwesome icons that work for the theme’s pages/custom links?

April 14, 2018 at 12:18 pm #52508

Artem Temos
Keymaster

As we mentioned, our theme supports Font Awesome 4.7 and you can find a list of all available icons here https://fontawesome.com/v4.7.0/icons/
Author

Posts