Add icons on your web pages

Introduction

This page explains how to add icons on you web page. Of course, the first solution is to find, download and upload on your server images or icons and place a <img src="..."> tag where the image has to appear. This solution has many disadvantages:

images or icons must be copyright free ;
image style must be consistent on your whole website ;
selecting and uploading the images is tedious.

The best solution is to use Content Delivery Network. A web server provides a JavaScript file available through the network. You just have to include this file in the <head> section of your web page, and thousands of icons are available.

Friconix

My favorite provider is Friconix:

it provides thousands of icons with a consistent style ;
if an icon were missing, you can request for a new icon ;
the documentation is clear and simple.

Web page integration

As explained on the quick starter guide, you need to load the JavaScript file in the <head> section of your web page :

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>

In the <body> section of your web page, every time you need to display an icon, copy/past the <i> tag from the page of the icon. Let's assume we want to display the warning icon from this page : https://friconix.com/icon/fi-ensuxl-warning-solid/.

<body>
    The warning icon : <i class="fi-ensuxl-warning-solid"></i>
</body>

The previous code should display something like :

The warning icon :

Source code of the full page

A simple example is available on the following JSFiddle.

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>
<body>
    The warning icon : <i class="fi-ensuxl-warning-solid"></i>.
    <h1>Icons inherit style : <i class="fi-stluxl-extra-large"></i></h1>
    Animations : <i class="fi-xwluxl-spinner-wide fi-pulse"></i>
</body>

Add icons on your web pages

Introduction

Friconix

Web page integration

Source code of the full page

See also