菜鸟学前端----图标字体使用详解

字体图标使用方法

        字体图标最大的优点就是可以用代码修改样式,看过几个关于使用字体图标的教学视频,我认为最重要的还是学会根据开发人员提供的demo来学习使用,这篇文章主要是讲学习的方法.

      第一步,下载字体.

      先从网上下载字体图标https://icomoon.io/#icons-icomoon ,点击下载,下载完成后会形成一个压缩包IcoMoon-Free-master.zip,解压找到如图文件

            然后将font文件夹剪切出来保存至使用的路径中,打开font文件夹,会发现名为IcoMoon-Free.ttf的字体库文件,目前ttf格式各大浏览器支持的比较好.

      下面是重点:

1.用文本编辑器打开font文件夹中的Reference.html,观察发现html文件中使用了一个css样式文件.

2.对应路径,打开css文件,会发现一段特殊的代码,猜想应该就是设置字体的,而且src明显就是设置字体路径的:

      

下面这个.icon类,一看就是使用了这个字体,因此对应icon类中的标签肯定使用了字体图标,因此我们在使用字体图标的时候,就需要把这段CSS代码拷贝到自己的html文档中,并把src内路径改为自己下载下来的.ttf文件路径;

3.最重要的一步,用浏览器打开之前下载字体文件中的demo.html,找到自己所需要的图标,例如home:,点击选中e906后面空白部分,蓝色位置处,复制这段空白;

 

把这空白处复制的内容粘贴到需要图标的标签中,如div中,

 

,粘贴后标签内还是空白,这是正常的.设置标签的样式名为icon,运行代码,大功告成!