Inserting icons into a website isn’t difficult. But when you combine text and icons (for example on a button), or if the icon should be resizable, it can cause some trouble.
The solution is to use Icon Fonts or SVG Icons. Icon fonts and SVG icons can be adjusted to any size and color.
In the following, we will look at a few options.
Ionicons (SVG)
Ionicons are very easy to integrate in your website.
Go to the Ionicons usage page and copy the installation script tag. Place the <script> near the end of your page, right before the closing </body> tag.
Here is an example of the script tag, but you should get the newest version from the website:
<script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
To use an icon just choose one from the Ionicons Icon Overview. If you click on an icon it will show you the code you must use. Here is an example with an icon and text:
<ion-icon name="heart"></ion-icon> I love icons
This will result in an icon and text like this:
Other Icon Libraries
- Font Awesome - a very popular icon font.
- Octicons
- Iconic
- Glyph
- Bytesize
- Google Material Icons
- And much more…