站长视角
用户至上

如何在 WordPress 使用阿里 Iconfont 免费图标教程

优质广告位招租,欢迎联系站长

Iconfont 是阿里 MUX 开发的矢量图标管理、交流平台。设计师可以将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

Iconfont 优点

只看介绍可能很难联想到和 WordPress 站长有什么关系,但要说道实用性,估计每位站长都觉得很赞:

  • Iconfont上有数以百万计的图标(目前二百多万个图标),贡献者很多;
  • 你可以在Iconfont上选择自己喜欢的图标;
  • 你可以将喜欢的图标简单的运用到自己的网站上;
  • 你可以直接使用阿里的外链图标文件,速度很快,重要的是还支持https;
  • 所以,你应该想尝试一下。

如何使用 Iconfont?

Iconfont支持微信、微博和Github账户直接登录,不需要注册,前往:Iconfont.cn。

一、登录 Iconfont,在搜索框中输入你想要的图标的中文或者英文,比如你想要一个“首页”的图标,你可以直接搜索“首页”或者“Home”来查找。

如何在 WordPress 中使用阿里 Iconfont 图标?免费好看,天下再也没有难做的图标。技术教程主机格调

二、在想要的每个图标上点击一个添加入库的购物车图标,只需点击这个图标即可将该图标收纳入库。

如何在 WordPress 中使用阿里 Iconfont 图标?免费好看,天下再也没有难做的图标。1技术教程主机格调

三、收集的差不多的时候,可以点击页面右上角的购物车来“添加至项目”,没有项目的话可以创建一个项目。

如何在 WordPress 中使用阿里 Iconfont 图标?免费好看,天下再也没有难做的图标。2技术教程主机格调

四、来到了图标项目页,你可以看到刚刚选择的所有图标。

如何在 WordPress 中使用阿里 Iconfont 图标?免费好看,天下再也没有难做的图标。3技术教程主机格调

五、在图标项目页中可以“查看在线链接”,你将得到类似下图的码。

如何在 WordPress 中使用阿里 Iconfont 图标?免费好看,天下再也没有难做的图标。4技术教程主机格调

六、将以下全部代码复制到 主题设置-自定义代码-自定义css样式 或者添加到 style.css。

/* 这段代码改成你自己项目的代码 */
@font-face {
  font-family: 'iconfont';  /* project id 554365 */
  src: url('//at.alicdn.com/t/font_554365_4c45s45ollgwg66r.eot');
  src: url('//at.alicdn.com/t/font_554365_4c45s45ollgwg66r.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_554365_4c45s45ollgwg66r.woff') format('woff'),
  url('//at.alicdn.com/t/font_554365_4c45s45ollgwg66r.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_554365_4c45s45ollgwg66r.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;
}

七、选择相应图标并复制图标代码,如: ,然后像下面一样使用。

<i class="iconfont">&#xe871;</i>

八、复制第三步的全部代码粘贴到你想要显示图标的位置。

如果你想在导航菜单中加入图标,你需要将代码复制到 外观-菜单 的 导航标签 中,比如你的导航文字原本是“首页”,现在你只需要在“首页”前面加上第三步的代码即可。

注意事项

需要注意的,如果你对之前选的图标不满意,重新添加了新的图标,需要重新更新下在线链接,要不新添加的图标不显示。

搬瓦工推荐方案

温馨提醒 如果您有选择困难症,直接选中间的 CN2 GIA-E方案,季付 $49.99,多达 12 个机房任意切换
方案 内存 CPU 硬盘 流量/月 带宽 机房 价格 购买
CN2
(最便宜)
1GB 1核 20GB 1TB 1Gbps DC3 CN2
DC8 ZNET
$49.99/年 直达
CN2 2GB 1核 40GB 2TB 1Gbps $52.99/半年
$99.99/年
直达
CN2 GIA-E
(最推荐)
1GB 2核 20GB 1TB 2.5Gbps DC6 CN2 GIA-E
DC9 CN2 GIA
日本软银 JPOS_1
荷兰 EUNL_9
$49.99/季度
$169.99/年
直达
CN2 GIA-E 2GB 3核 40GB 2TB 2.5Gbps $89.99/季度
$299.99/年
直达
HK 2GB 2核 40GB 0.5TB 1Gbps 中国香港 CN2 GIA $89.99/月
$899.99/年
直达
HK 4GB 4核 80GB 1TB 1Gbps $155.99/月
$1559.99/年
直达
TOKYO 2GB 2核 40GB 0.5TB 1.2Gbps 日本东京 CN2 GIA $89.99/月
$899.99/年
直达
TOKYO 4GB 4核 80GB 1TB 1.2Gbps $155.99/月
$1559.99/年
直达
搬瓦工优惠码:BWHNCXNVXV 2023年最新搬瓦工VPS购买图文教程
赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《如何在 WordPress 使用阿里 Iconfont 免费图标教程》
文章链接:https://cnidc.co/42948.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。
香港110M(含10M CN2)大带宽独服限量促销,香港E3-8G-1T硬盘-3IP,月付仅799!

登录

找回密码

注册