How to Use Bootstrap Icons with WoltLab Suite

Please be aware that nothing happens if you've only installed the icons. They to not replace WoltLab Suite's icons.

To get an overview of which icons are available from Bootstrap please visit Bootstrap's Icon Landing page - there's a search form making it easy to find the icon you're looking for.

The Technical Stuff

After you've installed the Bootstrap Icons plugin for WoltLab Suite you'll find the SVG sprite in the icon subdirectory within the root directory of WoltLab Suite Core. The file name isbootstrap-icons.svg. The plugin also comes with a SCSS file that sets the fill of the class icon to currentColor making sure that the icons will be displayed with the same color a Font Awesome Plugin would be.

Usage

You can use the SVG icons throughout WoltLab Suite wherever you can either write HTML or better Template code.

The best way to use the icons is writing template code. Let's say you'll want to use the filled heart icon, as shown on Bootstrap's icon page. You will need to write this code:


Code
<svg class="icon icon48 bi">
<use xlink:href="{@$__wcf->getPath()}icon/bootstrap-icons.svg#heart-fill"/>
</svg>

Result


Explanation

The classes you can use are the same as with the Font Awesome icons in WoltLab Suite. You'll add icon to get the color, icon48 to determine the size (in this case 48px). The class bi (for bootstrap icons) is optional to give you more possibilities to further customize the icon if needed.

The code {@$__wcf->getPath()} within the href will get the URL of WoltLab Suite Core's root directory. Heads up! there's no / behind that. You'll add the name of the icon you'd like to use by changing the name after the #. So if you'd like to use the archive icon you'll change the href to {@$__wcf->getPath()}icon/bootstrap-icons.svg#archive.

With HTML

Code
<svg class="icon icon48 bi">
<use xlink:href="https://path/to/your/wsc/icon/bootstrap-icons.svg#heart-fill"/>
</svg>

Result

Explanation

You'll need to replace everything between https:// and /icon - assuminig your site is running on https (which it should). You won't have to use the absolute path, you could also use the relative path.

As explained above: The classes you can use are the same as with the Font Awesome icons in WoltLab Suite. You'll add icon to get the color, icon48 to determine the size (in this case 48px). The class bi (for bootstrap icons) is optional to give you more possibilities to further customize the icon if needed.

You'll add the name of the icon you'd like to use by changing the name after the #. So if you'd like to use the archive icon you'll change the href to https://path/to/your/wsc/icon/bootstrap-icons.svg#archive.

Icon sizing

As already mentioned above the icon sizes depend on which class you append to the svg. These classes are available

  • icon16
  • icon24
  • icon32
  • icon48
  • icon64
  • icon96
  • icon128
  • icon144
  • icon256 (this one is available from Elevenfour's Bootstrap Icons plugin, it's not available from WoltLab Suite itself.)

Thank you for reading. If you have more questions please visit the Elevenfour Support Forum (user account required).