WordPress 字体图标使用教程 – LitePress 开发论坛

该话题包含 0个回复，1 人参与，最后由Yulinn 更新于 2年前。

正在查看 0 条回复

作者

帖子
- 2021年5月13日下午5:03 #19919
 Yulinn
 管理员
 @linn
 
 楼主
 
 我的博客
 yuque.com/linn
 1. WordPress 自带图标库【Dashicons】
 
 查询图标地址： https://developer.wordpress.org/resource/dashicons/
 
 仅 WordPress 后台使用或者当前页面带有 /wp-includes/css/dashicons.min.css?ver=5.7 类似的CSS文件才能正常显示图标
 
 2. 排名第一的字体图标库【Fontawesome 5.X】
 
 查询图标地址：https://fontawesome.com/icons?d=gallery
 
 CDN地址：https://www.bootcdn.cn/font-awesome/
 
 在<head>处加载font-awesome.min.css如下。
 <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
 
 注意：
 - 免费版支持三种样式：solid、regular和brands，后面在使用图标时根据样式的不同也会有不同的前缀
 - Font Awesome旨在与内联元素一起使用，我们建议使用一致的HTML元素以在项目中引用它们。我们喜欢标签的简洁性，因为最近大多数人都在使用 来强调/斜体化语义文本。如果那不是您的理想之选，那么在语义上使用更为正确。
 - fa前缀在5.x版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。
 - 两大要素显示图标 1.以fa-为前缀的名称；2.要使用的相应前缀的样式；
 基本用法
```




```
 固定宽度
 
 是否需要垂直对齐一系列图标，例如列表或导航菜单中的图标？对于这些情况，我们提供了固定宽度的样式支持。
 
 在引用您的图标的HTML元素上添加fa-fw类，以将一个或多个图标设置为相同的固定宽度。当更改图标宽度（例如，宽而短的图标上方的高而瘦的图标）会使得所有图标垂直对齐时，这个功能非常有用。为了清晰，在下面的示例中，我们在图标上添加了背景色，以便您可以看到固定的宽度，还可以增大父元素的字体大小。
```





```
 列表中的图标
 
 在固定宽度样式的垂直对齐的基础上，我们添加了一些实用样式，以处理带有用作装饰项目符号的图标的HTML列表。
 使用fa-ul和fa-li替换无序列表中的默认项目符号。
 - List icons can
 - be used to
 - replace bullets
 - in lists
```
<ul class="fa-ul">
 <li>List icons can</li>
 <li>be used to</li>
 <li>replace bullets</li>
 <li>in lists</li>
 </ul>
```
作者

帖子

正在查看 0 条回复

哎呀，回复话题必需登录。

1. WordPress 自带图标库 【Dashicons】

2. 排名第一的字体图标库 【Fontawesome 5.X】

注意：

基本用法

固定宽度

列表中的图标

1. WordPress 自带图标库【Dashicons】

2. 排名第一的字体图标库【Fontawesome 5.X】