平台开发中,欢迎参与测试。你可以在 QQ群:1046115671 中与我们交流,或是直接在社区发帖

    WordPress 字体图标使用教程

    • Yulinn
      楼主

      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元素以在项目中引用它们。 我们喜欢<i>标签的简洁性,因为最近大多数人都在使用<em> </em>来强调/斜体化语义文本。 如果那不是您的理想之选,那么在语义上使用<span>更为正确。
      • fa前缀在5.x版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。
      • 两大要素显示图标 1.以fa-为前缀的名称;2.要使用的相应前缀的样式;
      基本用法



      <i class="fas fa-camera-retro"></i><!-- 实心样式 -->
      <i class="fal fa-camera-retro"></i><!-- 细体样式 仅专业版 -->
      <i class="fad fa-camera-retro"></i><!-- 双色样式 仅专业版 -->
      <i class="fab fa-alipay"></i><!-- 品牌样式 -->
      固定宽度

      是否需要垂直对齐一系列图标,例如列表或导航菜单中的图标? 对于这些情况,我们提供了固定宽度的样式支持。

      在引用您的图标的HTML元素上添加fa-fw类,以将一个或多个图标设置为相同的固定宽度。 当更改图标宽度(例如,宽而短的图标上方的高而瘦的图标)会使得所有图标垂直对齐时,这个功能非常有用。 为了清晰,在下面的示例中,我们在图标上添加了背景色,以便您可以看到固定的宽度,还可以增大父元素的字体大小。





      <i class="fas fa-skating fa-fw" style="background: DodgerBlue;"></i>
      <i class="fas fa-skiing fa-fw" style="background: SkyBlue;"></i>
      <i class="fas fa-skiing-nordic fa-fw" style="background: DodgerBlue;"></i>
      <i class="fas fa-snowboarding fa-fw" style="background: SkyBlue;"></i>
      <i class="fas fa-snowplow fa-fw" style="background: DodgerBlue;"></i>
      列表中的图标

      在固定宽度样式的垂直对齐的基础上,我们添加了一些实用样式,以处理带有用作装饰项目符号的图标的HTML列表。
      使用fa-ulfa-li替换无序列表中的默认项目符号。

      • List icons can
      • be used to
      • replace bullets
      • in lists
      <ul class="fa-ul">
                  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
                  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
                  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
                  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
                </ul>
正在查看 0 条回复
  • 哎呀,回复话题必需登录。

加入 LitePress 论坛 ,参与知识分享与交流
登录 注册 进行评论
立即加入