CODEWITHSUNDEEP
cssfont-awesomebootstrap-4
user8949562
user8949562

Reputation:

Font-Awesome Icon not appearing

I am using Bootstrap4 and Font-Awesome together. I know Bootstrap4 is working fine because all classes I'm using from Bootstrap4 work fine. However, this is my first time working with Font-Awesome and I really don't know why the icons aren't appearing. I fetched FontAwesome using this in my head.

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

Then later I use.

<div class="container text-center">
    <br /><br /><br />
    <i class="icon-search"></i> <input id="search" type="text" placeholder="Search for a City" />
</div>

I used this documentation: http://fontawesome.io/3.2.1/icon/search/ Also, my network tab says that font-awesome has been fetched with a status of 200.

Upvotes: 0

Views: 771

Answers (1)

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

When using the CDN for 3.2.1version, everything is working fine.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="container text-center">
    <br /><br /><br />
    <i class="icon-search"></i> <input id="search" type="text" placeholder="Search for a City" />
</div>

If you want to use 4.7.0, you have to do it like this:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <div class="container text-center">
        <br /><br /><br />
        <i class="fa fa-search"></i> <input id="search" type="text" placeholder="Search for a City" />
    </div>

Documentation from v4: http://fontawesome.io/icon/search/

Upvotes: 3

Related Questions