wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

释放双眼,带上耳机,听听看~!

步骤方法

首先进入 阿里巴巴矢量图标库

一、注册账号-使用微博或者其他方式登录,完成注册。

二、图标管理-我的项目-添加项目,如下图所示

5e0fee5e76085c3289a3b1d6
项目名称和描述可随意修改

三、选择需要的图标,加入购物车,添加至我的项目

5e0fee5e76085c3289a3b201

四,font-class引入代码,如下图所示

<link rel="stylesheet" href="//at.alicdn.com/t/font_1131456_g5d3sac11q6.css">

 

5e0fee8f76085c3289a3c4d6

复制图标代码添加到菜单栏

5e0fee5f76085c3289a3b227
<i class="iconfont te-yemian">首页</i>

class 里面的两个值(iconfont 和 te-yemian)iconfont 是你创建项目时的 Font Family, te-yemian 则是图标代码4

 

五,上述font-class引用方式调用的图标是不支持调用多色图标,如果要用多色图标,则需要使用symbol引用

使用步骤如下:

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

d0e3f09698d8644b774d8d020ab78bf5-1

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步:加入通用css代码(引入一次就行):

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

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

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

 

温馨提示:本文最后更新于 2022-04-15 01:14 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
网络技术

JS代码屏蔽鼠标右键Ctrl+N、Shift+F10、F11、F5刷新、退格键等按键

2022-4-14 18:23:23

网络技术

WordPress纯代码免插件开启公众号回复验证码查看隐藏内容功能 (提供两种样式代码)

2022-4-14 18:57:43

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索