implement font-awesome pro icon

[kyKaq]

Hello,

I have font-awesome pro. Then I wanted to ask about the ways to use the font awesome pro in the hubspot. Is it same with the way to use the icon (add icon field) by edit the setting or anythings?

Or is it by coding?

Thanks.

[stefen · Accepted solution]

@kyKaq there are a lot of different ways you can use FontAwesome Pro. I think the most popular way is to add the provided "Kit Code" to the global site head in your settings. Once you do that, you can copy and past any icon code from fontawesome.com to your website and the kit code will handle the rest.

Personally, I like to use the SVG code directly in my modules/templates for better performance. But I will admit, it can be a bit of a pain to do things that way.

[yshinzato]

Hi,
@Anton @stefen is there a way to get the FontAwesome Pro library to appear in the Icon module? 

[stefen · Accepted solution]

@yshinzato no, you'd have to use your own custom field in a custom module and copy and paste the code into it for pro.

[yshinzato]

Thanks

[Anton]

Hi @kyKaq, 

it's quite simple. 

You can:

- place the FA pro link in the HubSpot settings ( settings -> website -> pages -> header options)

- upload all needed icons(SVG or PNG) to the file-manager and create a image-function in your module

- use a simple text-field(called e.g Font Awesome Icon) for the name like(recommend this one) after linking the FA CSS file somewhere

<i class="fad fa-{{module.font_awesome_icon}} fa-lg"></i>

- upload the FA CSS to your file-manager and link it directly in the module - this will load the FA CSS only if the module requires it and only once per site not per module

best, 

Anton

[stefen · Accepted solution]

@kyKaq there are a lot of different ways you can use FontAwesome Pro. I think the most popular way is to add the provided "Kit Code" to the global site head in your settings. Once you do that, you can copy and past any icon code from fontawesome.com to your website and the kit code will handle the rest.

Personally, I like to use the SVG code directly in my modules/templates for better performance. But I will admit, it can be a bit of a pain to do things that way.