看惯了单色FontAwesome图标,来享受彩色的吧!

介绍


wordpress默认支持FontAwesome的,使用方法也很简单,前往它们的官网获取图标代码,按照以下格式直接添加在需要的地方即可,比如你的导航栏,设置如下


导航标签处:首页改成:


<i class="fab fa-apple"></i>首页
然后刷新看效果吧,孤独的首页前面加了个图标是不是很酷。


but!这不是我们的教程,我们的教程是让这个图标变成彩色的,用的阿里图标库,简单快捷有效,方法官网已经给了,今天我抄袭过来


symbol引用




这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。与其他相比具有如下特点:


  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。


使用步骤如下:


第一步:拷贝项目下面生成的symbol代码:


//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js(不要复制这个,你要复制你自己的图标库symbol模式下的js代码)
然后按照这个设置
<script src="//你的js文件链接"></script>
将上面这个代码放在主题header.php文件的</head>前面。或者使用wp钩子搞(我不会。。。)


第二步:加入通用css代码(将这个css代码放入主题的css文件最后面,一般是style.css,可以自己修改):


    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }


第三步:挑选相应图标并获取类名,应用于页面:


<svg class="icon" aria-hidden="true">
    <use xlink:href="#复制你选好的图标名字在这里"></use>
</svg>


效果图


彩色版


单色版


重要说明


阿里图标库支持上传你自己设计的图标,这就很骚了,你想设计什么样的图标都可以,上传上去后,可以在你的网站添加属于自己的图标,酷毙了!!


比如我设计的(丝毫没有天赋)仅供参考


PS:P站的logo可不是我弄的?


WordPress

给nirvana主题加个深色夜间模式

2020-3-15 18:32:54

WordPress

Wordpress设置某个分类登录可见

2020-3-24 14:54:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
搜索