Sunday, May 14, 2017

Top 5 Icon Fonts (via CDN) for websites

On the web we will be seeing different kinds of icons on many websites but many think those icons were designed and kept as images but it is not true, those are just imported from different online libraries. You just need to add the particular class or custom tag provided by the icon pack to view those icons. Today I am going to provide the top 5 icon packs to use on the online. These packs can be used on blogger, wordpress, joomla or in your custom HTML pages.

Installation Process

  1. Choose your icon pack provider
  2. Download the pack or use the CDN link
  3. If you are working in HTML paste the CDN HTML code inside the <head> tag.
  4. Depending on the icon pack choose the desired icon and use the provided syntax to add the icon in your page.

1.Bootstrap Icons

CDN HTML Code:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Syntax:

<span class="glyphicon glyphicon-icon_name"></span>
OR 
<i class="glyphicon glyphicon-icon_name"></i>
All the icons and its names can be found here.
Check examples here.

Example:
See the Pen Bootstrap Icons Example by Harikesh (@harikesh409) on CodePen.


2. Font Awesome

CDN HTML Code:

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 Syntax:

<span class="fa fa-icon_name"></span>
OR 
<i class="fa fa-icon_name" aria-hidden="true"></i> 

All the icons and its names can be found here.
Check examples here.

Example:
See the Pen Font Aweswome Icons Example by Harikesh (@harikesh409) on CodePen.

3. Foundation Icons


CDN HTML Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />

Syntax: 

<span class="fi-icon_name"></span>
OR 
<i class="fi-icon_name"></i>
All the icons and its names can be found here.
Check examples here.

Example:
See the Pen Foundation Icons Example by Harikesh (@harikesh409) on CodePen.

4. Ionicons


CDN HTML Code:

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />

Syntax: 

<span class="icon ion-icon_name"></span>
OR 
 <i class="icon ion-icon_name"></i>
All the icons and its names can be found here.

Example:
See the Pen Ion Icons Example by Harikesh (@harikesh409) on CodePen.

5.Themify

CDN HTML Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />

Syntax:
<span class="ti-icon_name"></span>
OR 
<i class="ti-icon_name"></i>
All the icons and its names can be found here.

Example:
See the Pen Themify Icons Example by Harikesh (@harikesh409) on CodePen.

0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our Instant HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
4.Click Subscribe by Email to receive Replies