Do me a favor, take a few seconds to have a look at my last project.

Thank you, Lulu

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:

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:

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>

See also


Last update : 04/15/2019