Adding icon library with CSS
Visual content like icons in navigation menus or alongside important information can be a great advantage. Luckily, nowadays, you don't need to create icons from scratch — you can just link an icon library like Google Material Icons, Font Awesome, and Bootstrap Icons without downloading or installing anything.
Adding icons from the library requires several steps:
- Link the CSS file of the icon library in the
<head>tag - Create an
<i>element with the classmaterial-icons - Search for the icon's name on the library's website
- Add the icon's name between the start and the end tags
Because icon libraries are actually fonts, you can use CSS styles to adjust the icon's size, color, and shadow, just like for any other text on the web page.
