WordPress前端如何使用跟后台一样的Dashicons图标字体?

 2019-06-09 09:50:16  142 人阅读  13 条评论

很多站长都喜欢在站点菜单或其他地方添加一些图标字体,常用的就是添加Font Awesome 图标阿里巴巴矢量库图标。其实我们使用的 WordPress 本身就有一套管理员使用的官方图标字体 Dashicons,登录我们站点后台就能看到这些图标字体。那么有没有可能在我们站点前端使用跟后台一样的 Dashicons 图标字体?那是肯定的。

WordPress 前端使用Dashicons 图标字体步骤

1、在当前使用主题的 functions.php 文件中添加以下代码:

/**前台加載 Dashicons**/
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'dashicons' );
});

以上代码来自@nice

或者直接在当前主题的 header.php 文件</head>的前面添加以下代码:

<link rel='stylesheet' id='dashicons-css'  href='http://你的域名/wp-includes/css/dashicons.min.css?ver=5.1.1' type='text/css' media='all' />

2、到 WordPress 的 Dashicons 页面(传送门)寻找想要添加的图标,比如选择首页图标,然后点击『Copy HTML』链接按钮后复制如下图红框位置的代码。

WordPress前端如何使用跟后台一样的Dashicons图标字体? - 第1张 - boke112导航(boke112.com)

3、将所复制的图标代码粘贴到站点前端想要显示图标的位置,比如这个首页图标应该是放在导航菜单首页的前面,那么就进入站点后台 >> 外观 >> 菜单 >> 在导航标签的本站首页前面粘贴代码并保存菜单。具体如下图所示:

WordPress前端如何使用跟后台一样的Dashicons图标字体? - 第2张 - boke112导航(boke112.com)

4、到站点前端可以看到导航菜单“本站首页”已经多了一个首页图标,但是图标跟文本不对齐。具体如下图所示:

WordPress前端如何使用跟后台一样的Dashicons图标字体? - 第3张 - boke112导航(boke112.com)

经研究发现是因为这些图标字体的 line-height: 1 引起,解决办法就是在当前所使用主题的 CSS 文件中添加以下代码即可解决。

.dashicons, .dashicons-before:before {line-height: unset;}

WordPress前端如何使用跟后台一样的Dashicons图标字体? - 第4张 - boke112导航(boke112.com)

小结

对比使用 Font Awesome 图标和阿里巴巴矢量库图标的复杂,甚至还有一些图标不一定显示,boke112 导航倒是认为使用 Dashicons 图标更好,毕竟这些图标基本上够用,而且使用非常简单,把本文所说的第 1 和第 4 个步骤做好之后,看中哪个图标就复制相应的 HTML 代码添加到指定位置即可,不存在使用困难和不显示的情况。所以如果你还在为站点添加个性化图标而发愁的话,不妨试试 WordPress 官方的 Dashicons 图标字体。

题外话

其他非 WordPress 建站程序同样可以使用这个图标,只需要将/wp-includes/css/dashicons.min.css 文件存放到自己站点中,然后在站点的</head>的前面引用这个文件即可。剩下的操作跟本文所说的操作步骤一样。

您可能感兴趣的文章

文章标签:
本文地址:https://boke112.com/6862.html
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

阿里云专题 腾讯云专题虚拟主机专题WPS专题

 发表评论

大笑表情偷笑表情鼓掌表情思考表情疑问表情抠鼻表情抓狂表情晕表情黑线表情流汗表情流泪表情囧表情衰表情围观表情OK表情牛表情

  1. 唯心寒辞
    唯心寒辞 @回复

    我居然没注意到Wordpress官方还有图标字体

    • 懿古今
      懿古今2019-06-10 16:06  回复

      @唯心寒辞WordPress后台菜单前面的都是图标字体,其实一般博客网站使用WordPress官方的这些就差不多了

  2. 程门立学
    程门立学 @回复

    图标确实还是够用,但缺点也是访问的速度堪忧

  3. WordPress建站吧
    WordPress建站吧 @回复

    好吧居然还有这个功能,完全不知道

  4. 张波博客
    张波博客 @回复

    没有阿里的多。

  5. 杂烩网wwwzahuiwcom
    杂烩网wwwzahuiwcom @回复

    喜欢简约 但不简单

  6. 闲鱼
    闲鱼 @回复

    确实还不错,虽然少点,简单需求的话够用了

  7. Jane博客
    Jane博客 @回复

    这个可以,实用

  8. 猫鼬
    猫鼬 @回复

    我就是因为不会用这个 才用的阿里的

  9. 跋涉者
    跋涉者 @回复

    已经用上了,比阿里等简单 图标虽少 够用了

  10. 奶爸de笔记
    奶爸de笔记 @回复

    [抠鼻] 我没弄这些图标,因为太好看了我怕主题配不上。

  11. nice
    nice @回复

    说明一下 代码 我也是在网上找的,因为不知道最原始的出处 所以我没有标明出处,大佬赶紧把我链接下了,免得惹祸上身 [笑哭] [笑哭]