wordpress博客添加ico图标-wordpress给首页导航添加个性icon！

115资源网 1天前 WordPress教程浏览：2 0

注：这篇文章是写在我的博客上的。这类文章稍后可能会从博客中删除，所以我将其移至此处！

下面给大家介绍两种添加WordPress导航小图标的方法。第一个是使用免费字体 Awesome，它包含 675 个以上的图标。

这种方法目前被广泛使用。它简单、易用、兼容各种浏览器。

搜索插件名称 Font Awesomen 4 Menus

那么如何在php中引用；

接下来我们介绍第二种方法

阿里妈妈的Iconfont平台，您可以使用阿里账号或GitHub账号登录，直接点我；你可以设计自己的图标上传到这个平台wordpress博客添加ico图标，或者将图标转换成字体供前端工程师调用。

例如：（将此段替换为自己项目库中的代码）

/* 这个是你自己项目内代码 */
@font-face {
font-family: 'iconfont'; /* project id 967485 */
src: url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.eot');
src: url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.woff2') format('woff2'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.woff') format('woff'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.ttf') format('truetype'),
url('//at.alicdn.com/t/font_967485_a1mvv3lcjae.svg#iconfont') format('svg');
}

另外请务必在最后添加此代码

/* 务必加上这段代码 */
.iconfont{
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

最后一步，为导航添加图标样式，复制项目背景图标代码。例如后台代码为

在导航名称前面添加以下内容



完成后，尝试刷新页面，图标就会生效。

当然，这两种方法仅供参考。如果有更好的方法可以推荐给我吗？

这两种方法还是不错的。很棒的字体是免费的，所以给它你的第一选择！

阿栗妈妈目前没有说收费wordpress博客添加ico图标，但也没有说免费。后期是否收费还不确定。第二选择。

相关文章