2. 开发
    3. 393 0 14
关于主题的Font Awesome图标，也许这一个帖子能让你大致了解是怎么回事
juse 1月前

相信各位新手都遇到过类似的问题，比如希望在某些地方添加一个icon，但是在Font Awesome的官网上好容易找到了相关的代码，却不能用。

这到底是咋回事呢？

为什么程序里有那么多Font Awesome的图标，大佬们是如何做的？

这是一篇新手向的教程，如果有不对的地方，还请各位老大指点

1. 基础知识

首先是Font Awesome的网站：

英文官/方站（基于5.0目前最高版本为6.5）：https://fontawesome.com/

英文3.2.1：http://www.cdjc.com.cn/b/public/Font-Awesome-master/src/3.2.1/

中文站：https://fontawesome.com.cn/

V4版中文站：https://fontawesome.com.cn/v4

V4版图标预览：https://www.pintuer.com/documents/fontawesome/4.7.0/

V4版Ghthub：https://github.com/onface/font-awesome

V5版中文站：https://fontawesome.com.cn/

看到上面的这些网址是不是有点懵？为啥贴了这么多网址？都有啥用？

首先我们要知道Font Awesome的运行机制

它是一套css+font的组合，每个版本都有一些差异，图标的代码都可能无法通用，在你网站上的Font Awesome图标，默认的是一套版本（例如Xiuno默认的，Xiuno BBS内置的图标库是Font Awesome 4的某一个小版本（不是4.7）感谢Tillreetree），而插件方面，由于不同的开发者使用的Font Awesome图标版本或许有所区别，所以很可能你的网站上有可能同时存在几套Font Awesome图标的问题。

每个版本的区别都会导致你找到的图标代码可能无法识别的问题，尤其V5以后，代码差异就很大了，所以，作为一个爱折腾的站长，统一Font Awesome版本，很重要！

2. 如何使用

我们拿Font Awesome 4.7为例

因为4.7是V4的最后一个版本，也因为V5以后引用的图标字体以及引用代码差别较大，这里就不做赘述了，有兴趣的小伙伴可以去V5中文站上查看他们的文档。

首先是下载Font Awesome 4.7，打开https://github.com/onface/font-awesome

下载压缩包（文末附送）

下载后我们会看到好多文件和文件夹，先别懵，我们只需要它里面的几个东西就可以完美的显示icon

2.1引入CSS

首先我们需要的是它的css，文件在font-awesome-master\css\font-awesome.min.css

将这个css放入你的网站，并在你的皮肤头部（一般是header）这样的文件中，在<head>标签内引入这个css

2.2使用Font Awesome 字体

然后我们需要查看css里有没有包含Font Awesome字体，如果没有包含，那我们需要在css里引入字体，具体的字体文件在font-awesome-master\fonts文件夹中

css的写法是这样的

@font-face{
font-family:'FontAwesome';
src:url('你的网站路径/fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('你的网站路径/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('你的网站路径/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('你的网站路径/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('你的网站路径/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('你的网站路径/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}

如果写死了路径，也是一样，要讲css里的文件路径写成你实际上传的路径

这样，一来，你的网站就可以使用Font Awesome 4.7了。

 

最后于 1月前 被juse编辑 ，原因：
上传的附件：
收藏的用户（1） X
正在加载信息~
相关帖子
最新回复 (14)
全部楼主
  • 修罗学院 版主
    1月前 2楼
    1
    轻鸿是5
  • weige
    1月前 3楼
    0
    这个还真不知道
  • a961223
    1月前 4楼
    0
    最高版本为6.5，为啥不直接一步到位
  • juse 楼主
    1月前 5楼
    0
    a961223 最高版本为6.5，为啥不直接一步到位
    兼容性啊。升级到6.5之前的<i>标签没几个能用的
  • a961223
    1月前 6楼
    0
    juse 兼容性啊。升级到6.5之前的标签没几个能用的
    为啥还要兼容老版本,不是向下兼容吗
  • juse 楼主
    1月前 7楼
    0
    a961223 为啥还要兼容老版本,不是向下兼容吗
    问题就在于。。向下不兼容
  • a961223
    1月前 8楼
    0
    juse 问题就在于。。向下不兼容
    拉胯
  • Tillreetree 版主
    1月前 9楼
    1
    而Stately主题直接使用了Line Awesome图标库，与Font Awesome 5基本同步，但设计更“线框”化，更适合现代审美，同时还保留旧版Font Awesome用于兼容其他插件
  • Tillreetree 版主
    1月前 10楼
    0
    Xiuno BBS内置的图标库是Font Awesome 4的某一个小版本（不是4.7），区别在于xiuno的图标使用“icon-图标名称”前缀而不是“fa fa-图标名称”前缀（为什么这么做我不知道）
  • Tillreetree 版主
    1月前 11楼
    0
    Tillreetree Xiuno BBS内置的图标库是Font Awesome 4的某一个小版本（不是4.7），区别在于xiuno的图标使用“icon-图标名称”前缀而不是“fa fa-图标名称”前缀（为什么这么做我不知道 ...
    至少可以清醒xiuno没使用更加小众的图标库（或者自制的图标库）
  • Tillreetree 版主
    1月前 12楼
    0
    Tillreetree 而Stately主题直接使用了Line Awesome图标库，与Font Awesome 5基本同步，但设计更“线框”化，更适合现代审美，同时还保留旧版Font Awesome用于兼容其他插件
    直接从新开始
  • juse 楼主
    1月前 13楼
    0
    Tillreetree Xiuno BBS内置的图标库是Font Awesome 4的某一个小版本（不是4.7），区别在于xiuno的图标使用“icon-图标名称”前缀而不是“fa fa-图标名称”前缀（为什么这么做我不知道 ...
    其实主要问题就在于，这些图标的class并不兼容……
  • Tillreetree 版主
    1月前 14楼
    0
    juse 其实主要问题就在于，这些图标的class并不兼容……
    是的……
  • amwdhqgu12
    1月前 15楼
    0
    感谢楼主ing！！！
返回
juse
二级用户组
21
主题数 		165
帖子数
  作者最近主题   
  【宝塔】备份文件后发送到指定邮箱！站长必看！
   无需用任何库的Back To Top代码分享
   Font Awesome实在太烦人，我也不打算改，我可以用自定义的图标吗？
   关于主题的Font Awesome图标，也许这一个帖子能让你大致了解是怎么回事
   也谈“做网站避免盲目行动”
扫码访问