时间戳

首页 > 解决方案 > 字体真棒图标不会显示？

html - 字体真棒图标不会显示？

问题描述

我在网站上做了确切要求的步骤，但它仍然不起作用..

<script src="https://use.fontawesome.com/3e91539bf3.js"></script>
<div class="navbar">
  <a href="#"><i class="fas fa-user-friends"></i>About Me</a>
  <a href="#"><i class="fas fa-person-booth"></i>My Builds</a>
  <a href="#"><i class="fas fa-clock"></i>Get in-touch</a>
</div>

标签： htmlfont-awesome

解决方案

我可以说这是因为版本不匹配，你可以试试 font awesome 4.7，因为它包含在 bootstrap cdn 中。

复制到html头部

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

例子： 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <i class="fa fa-5x fa-cog fa-fw" aria-hidden="true"></i>
  <i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>

推荐阅读