How to add Bootstrap icons to Power Pages

Looking for free icons to add to Power Pages? Bootstrap has a FREE icon library and in this tutorial we're going to show how easy it is to get started by adding a icon to a navbar (website header).

Bootstrap icon library

There are loads of icons to choose from the Bootstrap library and to get started you will want to click on one of the icons and copy the icon font code as highlighted below.

Install the library

Open the portal management app and create a content snippet with the following values as need to install the Bootstrap icon library.

Credit to Ulrikke Akerbæk, as this brilliant blog post covers how to add font awesome icons to Power Pages. Ulrikke's post inspired this tutorial, where I apply the same approach to using Bootstrap icons instead.

• Name: Head/Fonts

• Website: Select your website

• Type: HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Icon example

To add an icon, all we need to do is add the below code element to where we would like this to be included. In the example above, the icon was added to the navbar (website header).

<i class="bi bi-backpack-fill"> </i>

All of the code from the "Mobile Header" content snippet that was changed to add a icon from Bootstrap can be found below.

<i class="bi bi-backpack-fill" style="color: #CB725D"></i>
<a href='~/'>
  {% if snippets['Site name'] %}
    <h1 class='siteTitle custom-sitetitle'>{{ snippets['Site name'] }}</h1>
  {% endif %}
</a>

To have more control of the size of the Bootstrap icons you can use the "fs-" utility class. For example, fs-1 sets the icon to the largest size.

Conclusion

Now you can add even more icons to your hearts content for Power Pages. Icons are really powerful for demonstrating actions to the end user and should be considered in Power Pages projects.

As always, thanks for reading and take it easy!

👋 If you liked this then please sign up to my newsletter that will notify you once a new blog comes out.