做旅游攻略网站,服务器租用大概多少钱,青海省公路建设网站,网站管理系统改不了的很多站长都喜欢在站点菜单或其他地方添加一些图标字体#xff0c;常用的就是添加Font Awesome 图标和阿里巴巴矢量库图标iconfont。其实我们使用的 WordPress 本身就有一套管理员使用的官方图标字体 Dashicons#xff0c;登录我们站点后台就能看到这些图标字体。那么有没有可…很多站长都喜欢在站点菜单或其他地方添加一些图标字体常用的就是添加Font Awesome 图标和阿里巴巴矢量库图标iconfont。其实我们使用的 WordPress 本身就有一套管理员使用的官方图标字体 Dashicons登录我们站点后台就能看到这些图标字体。那么有没有可能在我们站点前端使用跟后台一样的 Dashicons 图标字体那是肯定的。
WordPress 前端使用Dashicons 图标字体步骤
1、在当前使用主题的 functions.php 文件中添加以下代码
//WordPress前端加载Dashicons对应的css文件
add_action( wp_enqueue_scripts, function() {
wp_enqueue_style( dashicons );
});
以上代码来自网络
或者直接在当前主题的 header.php 文件/head的前面添加以下代码
link relstylesheet iddashicons-css hrefhttp://你的域名/wp-includes/css/dashicons.min.css typetext/css mediaall /
2、前往WordPress Dashicons图标库寻找想要添加的图标比如点击首页图标然后点击【Copy Span】按钮后按键盘上的CtrlC复制代码。 3、将所复制的图标代码粘贴到站点前端想要显示图标的位置比如这个首页图标应该是放在导航菜单首页的前面那么就进入站点后台 – 外观 – 菜单 – 在导航标签的本站首页前面粘贴代码并保存菜单。具体如下图所示 4、到站点前端可以看到导航菜单“本站首页”已经多了一个首页图标但是图标跟文本不对齐。具体如下图所示 经研究发现是因为这些图标字体的 line-height: 1 引起解决办法就是在当前所使用主题的 CSS 文件中添加以下代码即可解决。
.dashicons, .dashicons-before:before {line-height: unset;} 小结
对比使用 Font Awesome 图标和阿里巴巴矢量库图标的复杂甚至还有一些图标不一定显示boke112百科倒是认为使用 Dashicons 图标更好毕竟这些图标基本上够用而且使用非常简单把本文所说的第 1 和第 4 个步骤做好之后看中哪个图标就复制相应的 HTML 代码添加到指定位置即可不存在使用困难和不显示的情况。所以如果你还在为站点添加个性化图标而发愁的话不妨试试 WordPress 官方的 Dashicons 图标字体。
题外话
其他非 WordPress 建站程序同样可以使用这个图标只需要将/wp-includes/css/dashicons.min.css 文件存放到自己站点中然后在站点的/head的前面引用这个文件即可。剩下的操作跟本文所说的操作步骤一样。
来源https://boke112.com/post/6862.html
