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

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

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

方法一

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

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

步骤2：搜索添加Iconfont图标

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

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

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

步骤3：使用iconfont字体图标

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 这段代码改成你自己项目的代码 */



@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;

}





选择相应图标并复制图标代码，如： ，然后像下面一样使用。




1
<i class="iconfont"></i>





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



方法二



 点击查看教程：最简单的Wordpress Iconfont图标引用，




扫码关注wp悟空搜



精选优质免费WordPress主题模板，分享最新WordPress实用建站教程！



记住我们的网址：ztJun.com

		    					    			
			    					    					    				    					    			
 原文链接：https://xiaohost.com/1272.html，转载请注明出处。