logo标签列表

Font Awesome无法显示图标

htmlcssfont-awesome
122

我正在使用Font Awesome，但不希望使用HTTP添加CSS。我已下载Font Awesome并将其包含在我的代码中，但是它显示为一个带边框的方框而不是一个图标。以下是我的代码：

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

我想知道如何让图标显示而不是边框方框。

5
这个问题之前已经被问了很多次。请确保你也包含字体文件，而不仅仅是CSS。https://dev59.com/LGYq5IYBdhLWcg3wkRm_ - Carol Skelly
这是 Font-Awesome 故障排除指南在 Git 上的链接：https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting - Mehavel
请更新您的文件夹结构，其中包含font-awesome文件夹，这样我们就可以确定“font-awesome.min.css”是否正确获取了ttf路径。仅有CSS是无法工作的。 - Ajit Hogade
http://stackoverflow.com/a/42355738/397872 - Jacek Krysztofik
34个回答
0

你可能使用了版本控制系统（如git）将图标文件传输到服务器上。 git提示：

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

你可能需要修复你的字体。

0

我试图将fa 5.0.13与scss添加到Drupal 8中。 默认情况下，主要的fa.scss样式不包含在内，必须手动添加。

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";
0
下面的代码是 font-awesome 4.70.0 版本。要转到 font-awesome 5.11.2 版本，请单击 这里。
<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>
-1
You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接