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个回答
1
所以，似乎在元素上添加style='font-weight:normal;'或直接更改字体会覆盖Font Awesome CSS文件中的.fas{font-weight:900}定义。我猜字体文件内部有特定的定义。看起来font-weight必须设置在501到1000之间，否则字体可能看起来像一个方块。
1

我的问题是得票最多的一个

*{
font-family: xxxxx
}

将其更改为这个解决了问题。
body{
font-family: xxxx
}
0
在我的情况下，我使用了错误的路径。 并且，从网站下载最新版本。图标也必须来自同一版本。

https://fontawesome.com/versions

Font Awesome的版本可以在路径链接中查看。例如下面链接中的版本为6.1.2：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

不要使用CDN，我使用CDNJS。请访问该网站并下载最新版本。

https://cdnjs.com/libraries/font-awesome

0
小心Bootstrap！Bootstrap会覆盖.fa类。如果您分别引入两个包，认为“我将使用Bootstrap处理响应式块和Font-Awesome处理图标”，则需要在Bootstrap中处理.fa类，以使它们不干扰Font-Awesome的独立实现。
例如：在Bootstrap中使用字体族“FontAwesome”将干扰Font-Awesome中的字体族“Font Awesome 5 Free”，导致您得到一个白色框而不是想要的图标。
可能有更简洁的处理方法，但如果您已经按照清单尝试修复“白框”问题，仍然无法解决（就像我一样），那么这可能是您正在寻找的答案。
1
为什么要投反对票？虽然这是一个边缘情况，但它是一个在其他地方不容易找到的原因。 - jtubre
0

基于5.10.1版本。

我的解决方案（本地）：

  1. 如果您正在使用 "fontawesome.css" 或 "fontawesome.min.css"，请尝试改用 "all.css"（位于 css 文件夹中）。

  2. 您下载的 fontawesome 包中的 "css" 文件夹和 "webfonts" 文件夹必须在同一级别。

在我的情况下，我已经有了一个 css 文件夹，所以我只需将 fontawesome css 文件夹重命名为 "css-fa"。

将 "css-fa" 和 "webfonts" 都放入我的 css 文件夹中，然后在文本编辑器中正确地链接它，它就可以工作了。

例如：link rel="stylesheet" href="css/css-fa/all.css"

0

问题已解决，将目标化的 !important 字体族选择器从 * { ... } 更改为 *:not(i) { ... }（使用 SCSS 预处理器）；希望您也解决了。

0

尝试像这样引用所有必要的文件

<head>
  <!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
  <style type="text/css">
    <!-- custom styling for all icons -->
    i.fas,
    i.fab {
      border: 1px solid red;
    }
    <!-- custom styling for specific icons -->$$
    .fa-fish {
      color: salmon;
    }

    .fa-frog {
      color: green;
    }

    .fa-user-ninja.vanished {
      opacity: 0.0;
    }

    .fa-facebook {
      color: rgb(59, 91, 152);
    }
  </style>
</head>
<body>
  <i class="fas fa-fish"></i>
  <i class="fas fa-frog"></i>
  <i class="fas fa-user-ninja vanished"></i>
  <i class="fab fa-facebook"></i>
</body>

0
你需要将font-awesome文件放在css文件夹中并进行更改。

href="../css/font-awesome.css" to href="css/font-awesome.css"

还有一件事，您可以替换这个Font-awesome CSS文件并尝试这个。

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

那不是代码的工作方式。 - ethry
0
在 MacOS Mojave 上，我在 Safari 中遇到了这个问题。在 Chrome 中，font-awesome 图像能够正常工作，但在 Safari 中却无法工作，因此我确定这不是网站的问题。
我通过进入 Safari 菜单中的“偏好设置”，并在隐私选项卡下禁用/取消选中“防止跨站点跟踪”来使它们正常显示。
我不确定为什么这样修复它，但它确实起作用了。
0

我正在跟随这个教程来自己托管 Font Awesome Pro 5.13。

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

由于某些原因，我无法加载<link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">中的webfonts，结果只显示方块。但是当我使用<script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>时，一切都开始正常工作了。这两个链接都添加在HTML的<head>中。
这个 JavaScript 的问题在于文件太重，加载速度慢。 - exequielc
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接