首先什么是字体图标呢，那就是表面上是图标，其实它是文字，我们可以就像设置文字一样去设置字体图标，一般可以使用两种方式去设置字体图标，一种是引入css文件，然后设置特殊的class就可以了；另外一种是通过伪元素中的content去设置，下面跟我一起来看看 如何设置吧！
1：引入css文件，然后设置特殊的class去使用字体图标
我使用iconfont官网来进行实验，首先使用 百度搜索 iconfont，进入官网之后登录，登录之后先去新建 一个项目，首先打开我的项目：
点击新建项目图标：
然后输入项目名称，点击新建：
之后就可以去上方搜索框搜索你想要的图标了，例如输入[天猫]，点击回车，然后把鼠标放在你想要的图标上面，点击 购物 车图标添加入库：
之后在右上角打开购物车图标，点击添加至项目 ，选择你的项目名称点击确定就可以了，我的项目名称是[HelloWorld]：
之后就会进入我的项目里面，该项目正是你上面添加图标的那个项目，如果你想在本地使用的话，点击下载至本地：
下载完成之后解压，把解压文件中最里面的 所有文件 （以css、eot、woff等结尾的文件）复制到我项目下方的某文件夹下，该文件夹可以随意命名：
之后在ht ML 文件里面引入里面的iconfont.css文件：
使用的方法是在我想要放置图标的元素的class中首先加入iconfont，之后在加入该图标的名称，名称如下：
如果要使用该名称，只需要把移动到该图标上面，在弹出框中点击复制代码就可以了：
之后就可以直接去使用了：
其中iconfont是必须的，后面的是我们上面复制代码后的名称
如果你 不想 下载到本地的话，你也可以使用在线css文件来做，首先我们找到iconfont官网中上述项目那个界面，首先点击[Font class]，然后点击[暂无代码，点此生成]，之后我们就可以看到一个链接：
那我们就不需要下载文件了，也不需要导入相关文件了，只需要在使用图标的html代码中引入css文件：
之后就可以直接去使用了，class依然里面需要包含 iconfont，之后需要包含图标的名称作为class，图标名称还是通过[复制代码]的方式获得：
之后就这样写就可以了:
&nbs p;
2、通过伪元素中的content去设置
通过上面的步骤可以把图标添加到项目中，由于上面的那种引入方式已经叙述过了，这里在叙述，假设我们现在已经把图标引入到项目中了，我们依然可以先下载到把项目下载到本地，在上一个方法中已经说了，这个也不再叙述，之后把里面以eot、wof f2 、woff、ttf、svg结尾的文件复制一下，然后把这些文件赋值在我们的项目中的某个文件里面：
之后在css文件中引入这些文件，方法如下：
@font-face {
font-f ami ly: 'iconfont';
src: url(' .. /fonts/iconfont.eot');
src: url('fonts/iconfont.eot? # iefix') format('embedded-o PE ntype'), /* IE6 -i E8 */
url('fonts/iconfont.woff2') format('woff2'),
url('fonts/iconfont.woff') format('woff'), /* Modern br owsers */
url('fonts/iconfont.ttf') format('truetype'),/* Safari, And ROI d, iOS */
url('fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */
}
以上的font-f am ily是我们自己定义的，需要在url中引入这些文件，url()中的单引号里面是这些文件相对于这些css文件的 url地址 ，里面的 #iefix 、 #iconfont 不能少，其中 #iefix 是固定不变的，而 #iconfont 中的名称是 font-family 中的名称，他们需要加在相应文件名称的后面，format()中的内容不能变，你可以先把上述的内容复制到你自己的里面，只根据 后缀名 去更改相应的url地址就可以了，别乱改不然会出错，由于我们会多次使用里面的图标，所以我们需要把某些属性放在公共的class中，如下所示：
[class^="icon-"],
[class*="icon-"] {
font-family: 'iconfont';
font -s tyle: normal;
}
这代表只要class中包含有 icon- 就会有font-family和font-style属性，该 font-family 的名称就是 @font-face 中的 font-family 中的名称，如果我们需要使用该 class属性 的话，那就htm文件中的元素的class里面加入以 icon- 开始 的名称，如下所示：
之后我们就可以设置相应的图标了，一般是 利用 伪元素来设置，在css中可以这样设置：
至于里面的content内容，前面的\是固定的，后面的e799是这里来的，我们回到iconfont官网，找到我们项目中的图标，在上面停留之后，点击编辑图标：
复制[Unicode(16进制)]下面的内容：
这就完成了
如果你不想下载到本地的话，你也可以使用在线Unicode编码，首先我们找到iconfont官网中上述项目那个界面，点击[Unicode]，然后点击[暂无代码，点此生成]，之后我们就可以看到一个链接：
复制链接内容，这样我们就不需要复制文件到项目中了，只需要把上述链接内容放置到css文件里面：
@font-face {
font-family: 'iconfont'; /* PR oject id 2074612 */
src: url('//at.alicdn .COM /t/font_2074612_ndaz958615n.eot');
src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'),
url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg');
}
之后就在css中写：
[class^="icon-"],
[class*="icon-"] {
font-family: 'iconfont';
font-style: normal;
}
之后还要写上，content中的内容到底 是什么 在上面有详细说明，不在赘述：
.icon -t ianmao :: before {
content: '\e799';
}
然后html文件中的它也不能少，这些都在第二种方法中有详细解释，这里就 不在赘述了：
<i class="icon-tianmao"></i>
到此这篇关于让我来教你使用css中的字体图标的方法的 文章 就介绍到这了,更多相关 css字体 图标内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 让我来教你使用css中的字体图标的方法 全部内容，希望文章能够帮你解决 让我来教你使用css中的字体图标的方法 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于让我来教你使用css中的字体图标的方法的详细内容...