Font Awesome not working icons showing as squares

0 votes

So what I have been trying to do is to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square.

Here's how I include the files in the head:

<head> 
          <title>Page Title</title> 
        <link rel="stylesheet" href="css/bootstrap.css"> 
        <link rel="stylesheet" href="css/bootstrap-responsive.css"> 
        <link rel="stylesheet" href="css/font-awesome.css"> 
          <link rel="stylesheet" href="css/app.css"> 
              <!--[if IE 7]> 
          <link rel="stylesheet" href="css/font-awesome-ie7.min.css"> 
<![endif]--> 

</head>


Also, here's an example of me trying to use an icon:

<i class="icon-camera-retro"></i>


But all that gets rendered in a big square so could anyone help me to know what could be going on?

Feb 22, 2022 in Others by Rahul
 • 9,690 points • 7,310 views
If you istall font awesome locally on your device, just rename your font folder to "webfonts"
commented Jun 6, 2023 by anonymous
edited Mar 6

1 answer to this question.

0 votes

You must have 2 classes, the fa class and the class that identifies the desired icon fa-twitter, fa-search, etc …

<!-- Wrong --> 
<i class="fa-search"></i> 

<!-- Correct --> 
<i class="fa fa-search"></i>



Hope this answers your question.

answered Feb 22, 2022 by Aditya
 • 7,680 points

Related Questions In Others

0 votes
1 answer

I am working as a Oracle apps DBA I am planning to change the domain . Is it good if I shift to aws?

I am also working as an Oracle ...READ MORE

answered Nov 22, 2019 in Others by Pasha
 • 1,692 views
0 votes
0 answers

Self Created Laravel Link Not Working

I installed laravel 6.0 through composer and ...READ MORE

Dec 3, 2019 in Others by anonymous
 • 120 points • 1,253 views
0 votes
2 answers

'flutter' is not recognized as an internal or external command, operable program or batch file.

You have to Add flutter sdk path ...READ MORE

answered Aug 2, 2020 in Others by c49
 • 47,556 views
0 votes
1 answer

'git rev-parse HEAD' is not recognized as an internal or external command

Hi@akhtar, I also faced the same problem. You ...READ MORE

answered Jul 17, 2020 in Others by MD
 • 95,460 points • 5,147 views
0 votes
1 answer

Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

Try this Change the order of files it ...READ MORE

answered Jun 10, 2022 in JQuery by gaurav
 • 23,580 points • 1,098 views
0 votes
1 answer

Which is faster: Using bootstrap CDN or downloaded

CDNs deliver faster loading speeds for readers. Files ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
 • 7,680 points • 2,350 views
0 votes
0 answers

how to use fontAwesome icon from css

Can I use the font-awesome icon with ...READ MORE

Jul 29, 2022 in CSS by Edureka
 • 13,750 points • 978 views
0 votes
1 answer

how to use font awesome icons in HTML

First, you have to write this in ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
 • 980 points • 2,315 views
0 votes
1 answer

'adb' is not recognized as an internal or external command, operable program or batch file

Set the path of adb into System ...READ MORE

answered Feb 16, 2022 in Others by Aditya
 • 7,680 points • 8,720 views
0 votes
1 answer

'composer' is not recognized as an internal or external command in windows server

For anyone coming here from Google who ...READ MORE

answered Feb 17, 2022 in Others by Aditya
 • 7,680 points • 23,635 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.