当前位置:首页WP教程WordPress主题使用Iconfont字体图标的方法教程

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

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

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

Iconfont是 阿里妈妈MUX倾力打造的矢量图标管理、交流平台。上面面有非常丰富的图标。今天主题君这篇WordPress教程将分享两种在WordPress主题上使用Iconfontn字体图标的教程

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

步骤1: 注册账号,搜索喜欢的字体图标

登录https://www.iconfont.cn/成功注册账号后,在搜索框内搜索自己想要的Iconfont图标,每个图标上都有一个加入项目的购物车图标,点击购物车图标即可将该图标添加项目,具体操作如下图所示:

步骤2:搜索添加Iconfont图标

可以批量添加图标,搜索加入图标完成后,点击页面右侧悬浮的购物车图标 添加至项目:

如果你之前没有使用过iconfont,这里会提示创建项目名称,填写名称就行:

填写项目名称后,点击 添加至项目 即可成功创建iconfont项目。

步骤3:使用iconfont字体图标

添加至项目后,会跳转到 我的项目 页面,

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

将代码全部复制到 主题css样式 中,(一般主题都是style.css文件)

/* 这段代码改成你自己项目的代码 */
@font-face {
font-family: 'iconfont';
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 icon-ios"></i>

在WordPress主题任何地方使用图标,按照上面图标代码加入图标即可。

温馨提示:

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

文章链接:https://www.jitheme.com/2666.html

更新时间:2024年03月28日

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@jitheme.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读极(子)主题网络服务协议

给TA打赏
共{{data.count}}人
人已打赏
WP教程

WordPress使用代码禁用古腾堡编辑器

2023-3-8 22:15:39

WP教程

WordPress主题使用主题君Iconfont字体图标教程

2023-3-8 22:15:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索
  • 老胡对文章测试子主题灯箱幻灯片效果发布评论!
  • 沐颜小栈-MUOOY.CN对文章测试子主题灯箱幻灯片效果发布评论!
  • 小涛开通了年卡会员感谢支持!
  • 柠*💭成功下载了子主题多图幻灯片及灯箱效果演示超好资源!
  • 微科科技对文章把帮助改成文库?发布评论!
  • 老胡发布问答测试问答发布图片是否显示的问题 等您回答!