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.
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:
If you open the above page in browser, you should see four icons with green color.
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:
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: