HTML Course

Icons

Go back

Did you ever dream of having icons on your website like a lot of websites do? Well, that's easy. The two most well-known libraries are FontAwesome and Bootstrap.

  • Bootstrap Icons (open-source)
  • fontawesome (open-source, some restriction like giving credits but (almost) no-one is doing it 🙄, even trough that was what the creator told me in an email)

How do they work?

The main idea on the web, is to import the stylesheet (in the head)

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

Then, in the code, simply copy and paste the line for the icon, such as this line for this icon (check the webfont column for Bootstrap).

<i class="bi bi-alarm"></i>

Using icons in a application

You can use icons in a desktop application, the easiest way would be to download the icon as a SVG, then edit it (you can change the size/color easily), and convert it to a png (or use the SVG).

For Bootstrap, the SVG is on the icon page, in the "Copy HTML" section.

For FontAwesome v5, you got a small icon to download as SVG right next to the snippet for an icon.


I don't want to use a WebFont

Maybe, you don't want your icons to use a Font, loaded over the network, for them to be rendered. I do not think this is a good practice (as the icons are loaded with CDN, which should be faster), but you may copy and paste the SVG in your HTML file (or your may link it using "img").

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
  <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
  <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
</svg>

You can

  • edit width
  • edit height
  • edit fill with a color
  • add classes