Question

我正在尝试着色和/或设计font-awesome html元素根据我的需要。但它并没有改变它的原始设计。为什么？这是代码：

<i class="fab fa-facebook-f" style="color:white"></i>

Answer 1

您需要在<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

中添加<head>

Answer 2

你需要写<i class="fa fa-facebook-f" style="color:white"></i> fa 写为 fab 谢谢。

Answer 3

将fontawesome-all.js移动到项目目录中，以避免路径错误。并将其添加到您的代码中以加载js文件。

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>

然后您就可以开始在HTML <body>

中放置图标了

Answer 4

您只需在身体按钮<body>处添加此标记即可。

<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js</script>

FontAwesome是一个Javascript文件，而不是CSS。它需要加载在DOM之后。

.icon-color {
  color: #3b5998;
}

<head>
</head>
<body>
  <i class="fab fa-facebook-f fa-3x icon-color"></i> 
  <script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
</body>

这是一个fiddle所以你可以玩它。

您也可以将其设为内联样式

<i class="fab fa-facebook-f fa-3x icon-color" style="color: #3b5998"></i>

改变font-awesome HTML元素的设计

4 个答案: