logo标签列表

如何在CSS中添加Font Awesome

htmlcss
5

我正在尝试添加一个来自“font awesome”的图标，但不知何故在加载页面时它不显示。以下是我的HTML代码，我试图以不同的方式添加font awesome。

<html lang="en">
    <head>
        <title>Media Queries</title>
        <meta name="viewport" content="width=device-width, initial=scale1.0">  
        <link rel="stylesheet" href="main.css">
        <link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">      
    </head>
    <body> 
        <i class="fa fa-car" aria-hidden="true"></i>
        <h1>
            <i class="fa fa-car" aria-hidden="true"></i>Dummy Text
        </h1>
    </body>
</html>

在代码中是否有我漏掉的内容？

1
请检查控制台是否有任何错误。 - Leo the lion
4
尝试从https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css加载font-awesome，而不是使用你本地的文件。 - CalvT
1
它完美地运行了。 仍然在想其他方式不起作用的可能原因，但会继续使用那种方式。 - user agent
1
你检查过了吗。@import url（'/font-awesome-4.6.3/css/font-awesome.min.css'）; - Sayed Rafeeq
4个回答
11

您可以在"main.css"文件中添加font-awesome的CSS文件。

@import url('/font-awesome-4.6.3/css/font-awesome.min.css');
6

如果你计划使用CDN，只需在你的CSS文件（例如main.css）中添加一行代码，指示字体样式从何处导入即可。

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

以上示例中使用的链接来源：https://www.bootstrapcdn.com/fontawesome/

2
尝试使用以下方式调用font-awesome表单：

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

如果您从网站文件夹中尝试，则需要下载Font Awesome并将字体添加到字体文件夹中，然后将Font Awesome CSS添加到CSS文件夹中，接着像这样调用它:
<link rel="stylesheet" href="css/font-awesome.min.css">
1

您在链接中输入的是文件夹的名称。相反，应该输入文件的名称（font-awesome）。

在 font-awesome 文件夹中查找名为 font-awesome 的文件，将其复制并粘贴到浏览器文本字段中，以便您可以看到正确的路径。将该路径复制并粘贴到您的链接中，如下所示：

    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">

请仔细检查路径是否正确，因为我看不到其他错误。如果还是无法正常工作，请告诉我。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接