Question

我不太清楚如何做到这一点。我按照说明书写了这封信，但它没有用。我查看了其他教程，但似乎无法找到我能理解的答案。

我想知道我做错了什么？这是我的代码。

 <!DOCTYPE html>
 <html>
 <head>

    <link rel="stylesheet" type ="text/css" href="paws.css">
    <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">

</head>
    <body>

        <div class="prof-box">
            <img src="mrmcquack.jpg" class="prof-pic">

            <h1>RABIDWUFF</h1>
            <h5>An awkward human being who just wants 
                <br>to be a better version of herself.</h5>
            <p>My passion is sleeping.</p>
        </div>

        <i class="fas fa-user"></i>
        <i class="far fa-user"></i>
        <i class="fab fa-github-square"></i>

    </body>
</html>

这是我的css

    html { 
    background: url(desk.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

  .prof-box {
     width: 700px;
     height: 500px;
     background-image: url(burnt.png);
     padding: 40px;
     color: black;
     margin: 0 auto;
     margin-top: 110px;
     text-align: center;
 }

 .prof-pic {
     border-radius: 50%;
     height: 200px;
     width: 200px;
     margin-top: 59px;
 }

 h1 {

     font-weight: bold;
     letter-spacing: 4;
     font-size: 40px;
 }

 p {
     font-size: 20px;
 }

 h5 {
     font-size: 20px;
 }

Answer 1

首先检查你的字体真棒css文件，如果它不起作用，请尝试加载，而不是尝试下面给出的live font awesome css链接：

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

Answer 2

我看到一个问题，也可能是两个问题。

首先，您将最初的字体 - 真棒类从“fa”更改为“fas，far，fab” - 您无法做到这一点。您可以将这些添加为其他类，但不能删除“fa”类。

其次，可能找不到您的font-awesome.css文件。将静态文件替换为CDN上的版本，这对您来说是一个很好的测试。

替换它：

@ProcessElement

有了这个：

<link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">

并替换它：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

用这个：

<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<i class="fab fa-github-square"></i>

要添加其他类，您可以执行以下操作：

<i class="fa fa-user"></i>
<i class="fa fa-user-secret"></i>
<i class="fa fa-github-square"></i>

Answer 3

如果您使用服务器上的文件，则必须检查文件路径，所以如果你在这条路径上有你的字体真棒css

<link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">

您应该拥有此路径上的所有其他文件：

/static/webfonts/fa-brands-400.eot
/static/webfonts/fa-brands-400.svg
/static/webfonts/fa-brands-400.ttf
/static/webfonts/fa-brands-400.woff

你正在使用far和fas所以你必须拥有其他文件以及：

/static/webfonts/fas-brands-400.eot
/static/webfonts/fas-brands-400.svg
etc...

检查所有文件是否在正确的位置

我尝试在我的网页上添加Font Awesome图标，但它无法正常工作

3 个答案: