WordPress前端使用跟后台的Dashicons图标字体

许多站长都喜爱在站点菜单或其余处所添加一些图标字体,常用的就是添加Font Awesome图标和阿里巴巴矢量库图标。实在咱们应用的 wordpress 自己就有一套治理员应用的民间图标字体 Dashicons,登录咱们站点后台就能望到这些图标字体。那么有没有可能在咱们站点前端应用跟后台一样的 Dashicons 图标字体?那是必定的。

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

/**前台加載 Dashicons**/

add_action( 'wp_enqueue_scripts',function() {

wp_enqueue_style( 'dashicons' );

});

或许间接在以后主题的 header.php 文件的后面添加以下代码:

<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』链接按钮后复制如下图红框位置的代码。

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

4、到站点前端可以望到导航菜单“本站首页”曾经多了一个首页图标,可是图标跟文本不合错误齐。详细如下图所示:

经研究发明是由于这些图标字体的 line-height: 1 惹起,解决措施就是在以后所应用主题的 CSS 文件中添加以下代码即可解决。

小结

比照应用 Font Awesome 图标和阿里巴巴矢量库图标的复杂,甚至另有一些图标纷歧定显示,boke112 导航却是以为应用 Dashicons 图标更好,究竟这些图标基本上够用,并且应用很是简朴,把本文所说的第 1 和第 4 个步调做好之后,望中哪个图标就复制响应的 HTML 代码添加到指定位置即可,不存在应用坚苦和不显示的环境。以是假如你还在为站点添加共性化图标而发愁的话,没关系尝尝 WordPress 民间的 Dashicons 图标字体。其余非 WordPress 建站步伐同样可以应用这个图标,只要要将/wp-includes/css/dashicons.min.css 文件存放到本身站点中,然后在站点的的后面援用这个文件即可。剩下的操作跟本文所说的操作步调一样。

以上是搬码源码网(abnma.com)为你网络收拾整顿的全数代码内容,但愿文章可以或许帮你解决所碰到的步伐开提问题。假如感觉搬码源码网网站内容还不错,接待将搬码源码网网站保举给步伐员挚友。

0
分享到:
搬码资源网广告位

评论0

请先

没有账号? 忘记密码?