# implement font-awesome pro icon

**URL:** <https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959>\
**Category:** CMS Development\
**Tags:** hubdb, html\
**Created:** [November 13, 2020, 5:44am UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959 "2020-11-13T05:44:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kyKaq](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kykaq/32/29368_2.png) [@kyKaq](https://community.hubspot.com/u/kyKaq)\
**Post date:** [November 13, 2020, 5:44am UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959/1 "2020-11-13T05:44:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [November 13, 2020, 11:20am UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959/2 "2020-11-13T11:20:04Z")

</div>

@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](http://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.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [November 15, 2020, 4:01pm UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959/3 "2020-11-15T16:01:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yshinzato](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/yshinzato/32/44503_2.png) [@yshinzato](https://community.hubspot.com/u/yshinzato)\
**Post date:** [February 29, 2024, 9:05pm UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959/4 "2024-02-29T21:05:00Z")

</div>

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

 ![Screenshot 2024-02-29 at 4.03.10 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/61c026ba40faef64f74b66bfcd568fe5d2979846.png)

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [March 1, 2024, 1:45pm UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959/5 "2024-03-01T13:45:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yshinzato](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/yshinzato/32/44503_2.png) [@yshinzato](https://community.hubspot.com/u/yshinzato)\
**Post date:** [March 18, 2024, 3:41pm UTC](https://community.hubspot.com/t/implement-font-awesome-pro-icon/27959/6 "2024-03-18T15:41:19Z")

</div>

Thanks