Font Awesome icons in Power Pages

Last updated on 25/11/2022

This blog post will show you the best practice way to enable Font Awesome icons in Power Pages. By default, the portal has icons from Bootstrap called Glyphicons – but you can change to using Font Awesome icons pretty easily.

I know there are a lot of blog posts about this already – and most of them put his code in the header web template or something like that. Not the best practice. So I wanted to show you how to do it properly and introduce you to two new content snippets as well.

Get Font Awesome

We need to let the Power Pages portal know where to get the Font Awesome icon library from. You can get your hands on the link for free, but you will need to sign up – even for the free version.

At this writing moment Font Awesome version 6 is the new kid on the block. Get started by visiting the link below. The Font Awesome website has an intuitive user experience, and I trust that you will figure this step out without my step-by-step instructions.

Get Font Awesome icons here: https://fontawesome.com/

Enable Font Awesome icons in Power Pages

To use Font Awesome icons on a website the link be placed in the <head> tag in your HTML, as you can see from the Font Awesome documentation:

Link to this documentation page:
https://fontawesome.com/docs/web/setup/use-kit#_3-add-the-kit-code-to-your-project

We cannot access and edit the <head> tag directly in Power Pages, but there are content snippets that allow us to add, replace and expand the content of the <head> tag.

Content snippets that apply to <head> tag:

  • Head/Bootstrap
  • Head/Fonts
  • Head/Bottom
Head/BootstrapReplaces all references to Bootstrap and any other stylesheet. (Not recommended)
Head/FontsMeant for adding fonts – this is what we’ll use for Font Awesome
Head/BottomContent will be added to the bottom of the <head> tag

Note: None of these exists in a portal out-of-the-box, but you can create them yourself.

Head/Fonts

This content snippet will not exist by default, so we need to create it ourselves. Content snippets are only available through the old Portal Management App at this point in time.

  1. Open your Power Page portal in the new design studio (edit)
  2. Click the three dots at the bottom of the left menu
  3. Click the “Portal Management App” button

A new tab opens with the Portal Management App. It’s a model-driven app that allows you to configure the Power Pages portal in a much more advanced and old-school way than the modern designer.

You can learn more about all the different interfaces for editing Power Pages in my blog post from the link below:  

Locate “Content Snippets” in the left menu and click the “+ New” button from the toolbar:

A form will open for you to enter values for the new content snippet.

  • Set the name to “Head/Fonts”
  • Set Website to your Power Page
  • Set Type” to HTML
  • Select the “HTML” tab in the Value section, and paste the “Kit Code” that you got from the Font Awesome Website.

Save the form, delete your portal cache and reload the portal in the browser. To verify that the reference to Font Awesome en enabled you can open the Developer Tool in the browser, open the <head> tag and search for “fontawesome” to see the results.

You can also add regular fonts this way. Thank you Aaliyah for sending me the link to this website with free fonts that we can start using: 
https://www.websiteplanet.com/blog/best-free-fonts
At the bottom of this long page, you also find good answers to questions about 
royalty-free fonts and other free fonts resources: 
https://www.websiteplanet.com/blog/best-free-fonts/#hselect--13

Try it out

You can also verify that Font Awesome icons are available by using them on a page. One way to do this is to simply

  1. Find an icon you like in the Font Awesome Icons library
  2. Copy the HTML code for that icon
  1. Open a page in Power Pages Design Studio
  2. Open the inline editor
  3. Paste the HTML code in a logical place
  4. Save

Preview the portal to see the changes, and it might look something like this:

You also might want to replace the old-looking Glyphicons with more modern icons. For instance, I replaced the arrow in the breadcrumb with a Font Awesome icon. You can learn how I did that in this blog post:

Tip

Make sure that you choose icons that are free and that are on the same version as your kit – unless you pay the full license of course. Whenever an icon isn’t showing correctly that’s usually the reason.

Hope this was helpful! Happy portaling! 😀

Get new blog posts right to your inbox

Ulrikke Akerbæk Written by:

User Experience through digital interfaces, interaction, branding and visual design has been her passion and focus since she created her first website at age 14. She is a solution architect for Power Platform, specializing in Power Apps Portals. She is a Business Applications MVP and was named one of the top 50 women in tech in Norway in 2022. Currently working as Low Code Practice Lead at Itera.

4 Comments

  1. CBeckett
    20/02/2024
    Reply

    Hi, thank you for the great write up for importing web kits into portals. Quick question we run into an issue where internal icons break after we import the webkit. Based on the included font awesome icons no fa-solid / fa-regular icons are included so when the web kit is imported things like the calendar icon breaks for date pickers. Do you happen to know any work around for this?

    • 15/05/2024
      Reply

      Hi, and thank you for your question. I mitigate this by identifying the icons that are missing and replace the icon with CSS:
      For instance:

      .add-chevron-right::after {
      font-family: "FontAwesome";
      content: "\f054";
      }

      You can find the value to use in “content” from the fond awesome-library when you open up an icon.

      Hope it works! 😀

Leave a Reply

Your email address will not be published. Required fields are marked *