JSFIDDLE BOOTSTRAP ICON PLUS HOW TO
JSFIDDLE BOOTSTRAP ICON PLUS CODE
JSFIDDLE BOOTSTRAP ICON PLUS PLUS

In this example, eight various icons including social icons (Facebook, Twitter, Linkedin) are used from the Feather icons library. You also require either hosting the feather.js file at your own or use the CDN link as given below: Unlike the class used in most above cases, you will use the data-feather attribute and the icon name in the markup.

JSFIDDLE BOOTSTRAP ICON PLUS CODE

With each icon, the code is given that you may use in your web page like this: You may see the collection of icons by visiting their website by above link. The feather is also an open source collection of icons that are designed with an emphasis on readability, simplicity, and consistency. See the demo online with code where I used different styles of buttons including.

JSFIDDLE BOOTSTRAP ICON PLUS HOW TO

This is because it is simple to explain and learn while you may apply the icon code in various elements easily.įor font-awesome icons, I am using buttons again for demonstrating how to use it. You may learn more about font-awesome accessibility options here.Īlmost in all examples, I used the buttons for demonstrating how to use icons for certain library.

The CDN of the font-awesome icons library: Using font-awesome icon library is also pretty simple in your websites. This is a big library of icons where you may access the code of specific icon by clicking on any icon and going into its detail page. Although, this is not listed in the Bootstrap’s official website for recommended (tested or untested) list yet this is used widely. The font-awesome is one of the most popular icons libraries around. See the complete code with output in the example page. The following example shows using ionicons in buttons and a link. All you need to do is referring the CDN link or host the CSS at your own for ionicons library and use the icon code in a tag like element. The ionicons is also a big icons library that you may easily use in your projects based on Bootstrap. Tutorials Homelaunch 3- Using ionicons in Bootstrap The example below shows using an icon of Material library with a link: For example, using in form fields, links or simple text, navbar etc. You may use icons with various components in Bootstrap. Click this and it will display the code that you may copy on your web page as shown below:

JSFIDDLE BOOTSTRAP ICON PLUS PLUS

This snippet is free and open source hence you can use it in your project.Bootstrap 3 accordion collapse with plus minus icons snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and. A blue bar should display in the bottom where you can see ICON FONT caption. Bootstrap 3 accordion collapse with plus minus icons snippet is created by BBBootstrap Team using Bootstrap 3. You may get the code of any icon by visiting the website and click on any icon that you require.

In the example, I used camera icon as follows:

The next step is using the markup in the place where you intend to display the icons. For setting up material icons, read this guide. There are other ways of installing the Material Icons as well e.g. For using the material icons on your web pages, you need to include the Google web fonts as follows:

Jsfiddle bootstrap icon plus