css - Font Awesome not working, icons showing as squares

Question

Welcome To Ask or Share your Answers For Others

css - Font Awesome not working, icons showing as squares

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Font Awesome not working, icons showing as squares

So I'm trying 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>

And 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. Does anyone know what could be going on?

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:24:16+0000

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>

Categories

css - Font Awesome not working, icons showing as squares

css - Font Awesome not working, icons showing as squares

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags