topic implement font-awesome pro icon in CMS Development

implement font-awesome pro icon

kyKaq — Fri, 13 Nov 2020 05:44:25 GMT

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.

Re: implement font-awesome pro icon

stefen — Fri, 13 Nov 2020 11:20:04 GMT

@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.

Re: implement font-awesome pro icon

Anton — Sun, 15 Nov 2020 16:02:35 GMT

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

- 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

Re: implement font-awesome pro icon

yshinzato — Thu, 29 Feb 2024 21:07:23 GMT

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

Re: implement font-awesome pro icon

stefen — Fri, 01 Mar 2024 13:45:48 GMT

@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.

Re: implement font-awesome pro icon

yshinzato — Mon, 18 Mar 2024 15:41:19 GMT

Thanks