W3CSS Icons

W3CSS supports variety of icon libraries including font awesome icons, bootstrap icons and google material design icon. To use icons from these external libraries we first have import the CDN link from the server of the corresponding library and add it as style sheet to the header section of our website. We can then increase the size of these icons using w3-size property. We can also change their color via w3-text-color property.

Using Font Awesome

To use font awesome icons in your website, you need to include CDN link of the library in the styles sheet in the header section. In the following example we used four font awesome icons. We changed their colors with w3-text-green. In the output you should see pencil, search, shower and trash icons. Take a look at the following example:

Download the code Try the code

If you open the above page in browser, you should see four icons with green color.

Using Google Material Icons

To use google material design icons in your website, you need to include CDN link of the google material design library in the styles sheet in the header section. In the following example we used four google material design icons. We changed their colors with w3-text-pink. In the output you should see menu, search, mail and close icons. Take a look at the following example:

Download the code Try the code

Using Twitter Bootstrap Icons

To use bootstrap icons in your website, you need to include CDN link of the bootstrap icon library in the styles sheet in the header section. In the following example we used four bootstrap icons. We changed their colors with w3-text-red. In the output you should see print, search, plane and user icons. Take a look at the following example:

Download the code Try the code

<<< W3CSS Tag TypesW3CSS Responsive >>>