WordPress主题使用Iconfont字体图标的方法教程

2023-06-28 0 159

Iconfont字体图标在设计中被广泛应用,在网站中也是必不可少的, 它能应用于网站的各处,例如菜单导航、标题等等,不论是对设计人员,还是对站长来说实用性都是非常大的。

Iconfont是 阿里妈妈MUX倾力打造的矢量图标管理、交流平台。上面面有非常丰富的图标。今天WordPress自习室将分享主题使用Iconfont字体图标的方法教程。

注册iconfont帐号

登录https://www.iconfont.cn/成功注册账号

搜索图标并添加至项目

在搜索框内搜索自己想要的Iconfont图标,每个图标上都有一个加入项目的购物车图标,点击购物车图标即可将该图标添加项目,具体操作如下图所示:

 

获取在线连接并调用

添加至项目后,会跳转到“我的项目”页面,在图标项目页中可以“查看在线链接”,你将得到类似下图的代码。将代码全部复制到 主题css样式 中(一般主题都是style.css文件)

/* 这段代码改成你自己项目的代码 */
@font-face {
  font-family: 'iconfont';  /* Project id 4135720 */
  src: url('//at.alicdn.com/t/c/font_4135720_nmr8e0po2c.woff2?t=1688127887818') format('woff2'),
       url('//at.alicdn.com/t/c/font_4135720_nmr8e0po2c.woff?t=1688127887818') format('woff'),
       url('//at.alicdn.com/t/c/font_4135720_nmr8e0po2c.ttf?t=1688127887818') format('truetype');
}
/* 这段必须有 */
.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">&#xe648;</i>
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

WordPress自习室 进阶教程 WordPress主题使用Iconfont字体图标的方法教程 https://www.wpzxs.com/34.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务