Font Awesome 5中CSS content不显示？图标代码替代图标显示求助

嘿，我帮你排查下问题出在哪，这俩小错误很容易踩坑：

1. @font-face 引用资源错误 #

你在@font-face里引用的是FontAwesome的CSS文件链接，但@font-face需要的是字体二进制文件（比如.woff2、.ttf），不是CSS文件。其实更简单的方式是直接在HTML里引入FontAwesome的官方样式表，不用自己手动写@font-face——官方CSS里已经包含了正确的字体加载规则，自己写反而容易冲突或加载失败。

2. content 里的图标代码格式错误 #

你写的content: '/f35a';是错的，CSS中表示Unicode字符需要用反斜杠开头，正确写法是content: '\f35a';。

修复后的完整方案： #

第一步：在HTML头部引入FontAwesome CSS

直接添加这行代码到你的HTML <head> 里：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">

第二步：修改你的CSS代码

删除自己写的@font-face，只保留目标元素的样式：

.fp-prev:before {
  color: #fff;
  content: '\f35a'; /* 这里改成反斜杠开头 */
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

这样修改后，图标应该就能正常显示啦～

内容的提问来源于stack exchange，提问作者happycoding