Bootstrap Icon

The most popular and highly compatible icon library for Bootstrap is . It provides 675 icons.

 

Add font Awesome CDN link in head section:

 

<!-- Font Awesome CSS -->

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

How to Use Font Awesome Icons in Your Code

 

To use font-awesome icons in your code you'll require an <i> tag along with a base class .fa and an individual icon class .fa-*.

 

Syntax:

<i class="fa fa-class-name"></i>

Where fa-class-name is the name of the particular icon class (e.g. fa-search, fa-user, fa-star, fa-calendar, fa-globe, etc.) defined in font-awesome.min.css file.

 

Ex.

<!--Add here bootstrap CDN-->

……

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

…….

<style type="text/css">

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>

    <button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>

</body>

Powered  by Codersarts