让我来教你使用css中的字体图标的方法

首先什么是字体图标呢，那就是表面上是图标，其实它是文字，我们可以就像设置文字一样去设置字体图标，一般可以使用两种方式去设置字体图标，一种是引入css文件，然后设置特殊的class就可以了；另外一种是通过伪元素中的content去设置，下面跟我一起来看看 如何设置吧！

1：引入css文件，然后设置特殊的class去使用字体图标

我使用iconfont官网来进行实验，首先使用百度搜索iconfont，进入官网之后登录，登录之后先去新建 一个项目，首先打开我的项目：

点击新建项目图标：

然后输入项目名称，点击新建：

之后就可以去上方搜索框搜索你想要的图标了，例如输入“天猫”，点击回车，然后把鼠标放在你想要的图标上面，点击购物车图标添加入库：

之后在右上角打开购物车图标，点击添加至项目 ，选择你的项目名称点击确定就可以了，我的项目名称是“HelloWorld”：

之后就会进入我的项目里面，该项目正是你上面添加图标的那个项目，如果你想在本地使用的话，点击下载至本地：

下载完成之后解压，把解压文件中最里面的所有文件（以css、eot、woff等结尾的文件）复制到我项目下方的某文件夹下，该文件夹可以随意命名：

之后在html文件里面引入里面的iconfont.css文件：

使用的方法是在我想要放置图标的元素的class中首先加入iconfont，之后在加入该图标的名称，名称如下：

如果要使用该名称，只需要把移动到该图标上面，在弹出框中点击复制代码就可以了：

之后就可以直接去使用了：

其中iconfont是必须的，后面的是我们上面复制代码后的名称

如果你不想下载到本地的话，你也可以使用在线css文件来做，首先我们找到iconfont官网中上述项目那个界面，首先点击“Font class”，然后点击“暂无代码，点此生成”，之后我们就可以看到一个链接：

那我们就不需要下载文件了，也不需要导入相关文件了，只需要在使用图标的html代码中引入css文件：

之后就可以直接去使用了，class依然里面需要包含 iconfont，之后需要包含图标的名称作为class，图标名称还是通过“复制代码”的方式获得：

之后就这样写就可以了:

2、通过伪元素中的content去设置

通过上面的步骤可以把图标添加到项目中，由于上面的那种引入方式已经叙述过了，这里在叙述，假设我们现在已经把图标引入到项目中了，我们依然可以先下载到把项目下载到本地，在上一个方法中已经说了，这个也不再叙述，之后把里面以eot、woff2、woff、ttf、svg结尾的文件复制一下，然后把这些文件赋值在我们的项目中的某个文件里面：

之后在css文件中引入这些文件，方法如下：

@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */ url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */ url('../fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */ }

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!