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.
Check examples here.
Example:
See the Pen Bootstrap Icons Example by Harikesh (@harikesh409) on CodePen.
All the icons and its names can be found here.
Check examples here.Installation Process
- Choose your icon pack provider
- Download the pack or use the CDN link
- If you are working in HTML paste the CDN HTML code inside the <head> tag.
- 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>
Example:
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:
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:
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:
Hi! I am P.Harikesh,founder of this blog.You can find many blogging tricks and tips in this blog.
Your website is very cool and it is a wonderful inspiring article. thank you so much.
ReplyDeletewebsite design training
website design courses