iconfont的使用

为什么使用iconfont

1
  
  
  
  
  
  
 、字体图标可以随意改变大小
  
  
  
  
  
  
 ，避免图片放大失真问题 
  
  
  
  
  
 ，但是值得注意 


 


 


 


 


 


 
，修改字体图标大小的时候使用font-size属性
 
 
 
 
 
 
，并且颜色可随意更改

2 
  
  
  
  
  
 、字体图标相比于图片图标体积更小  
   
   
   
   
   
  ，所占空间也就更少 

 

 

 

 

 

 
，对于微信小程序这种体积不能超过2M的项目来说就特别推荐

3 


 


 


 


 


 


 
、减少请求次数

 

 

 

 

 

 
，一个css文件可包含所有的图标             ，减少大量使用图片 
 

 
 

 
 

 
 

 
 

 
 

 
，刷新速度和加载速度更快

5
 
 
 
 
 
 
、设计不需要提供多个场景图标












，只需要维护一个项目图标库就行                   ，方便开发者使用 
 
 
 
 
 
 
 
 
 
 
 
 
，提高开发效率


















，降低维护成本

网页web开发使用iconfont的3种方法

使用iconfont有三种方法             ，一般情况下都使用在线使用 
 
  
 
  
 
  
 
  
 
  
 
  
，减少代码量

iconfont官网地址：iconfont官网

第一种方法：icon 单个使用

对于刚学习网页开发的朋友们来说











，可以采取这个方法
  
  
  
  
  
  
 ，将我们的icon图标下载到本地 
  
  
  
  
  
 ，加入我们的放图标的文件夹 


 


 


 


 


 


 
，再引用就可以了
  
  
  
  
  
  
 。我们一起来看看怎么实现：

1.步骤一：打开iconfont官网
 
 
 
 
 
 
，官网的图标我已经放在上面了 
  
  
  
  
  
 。

建议可以使用微博账号登录  
   
   
   
   
   
  ，更方便 


 


 


 


 


 


 
。

2.步骤二 

 

 

 

 

 

 
，选择自己需要的图标

 

 

 

 

 

 
，比如我找的登录图标

在主页的搜索框输入登录             ，然后点击回车

会出现我们的搜索结果 
 

 
 

 
 

 
 

 
 

 
 

 
，我们可以选择我们想要的图标












，下面有翻页符号                   ，可以慢慢寻找自己想要的图标

找到自己需要的图标后 
 
 
 
 
 
 
 
 
 
 
 
 
，点击下载

点击之后会弹出下载页面


















，按自己的需求点击下载             ，我这里下载的png格式

将自己下载好的png图片放到自己需要引入的项目图片文件夹下面 
 
  
 
  
 
  
 
  
 
  
 
  
，去到html文件中

相对路径的使用：./代表进入与当前文件路径一致的文件夹中；…/代表退出当前文件目录进入与父级目录相同的文件夹中；如果还需要再退到上一级目录











，则继续使用…/来实现

在浏览器中打开
  
  
  
  
  
  
 ，得到如下效果 
  
  
  
  
  
 ，可以通过我们的CSS样式对图片进行操作

第二种方法：unicode 引用

unicode是字体在网页端最原始的应用方式 


 


 


 


 


 


 
，特点是：

兼容性最好
 
 
 
 
 
 
，支持ie6+  
   
   
   
   
   
  ，及所有现代浏览器
 
 
 
 
 
 
。 支持按字体的方式去动态调整图标大小 

 

 

 

 

 

 
，颜色等等  
   
   
   
   
   
  。 但是因为是字体

 

 

 

 

 

 
，所以不支持多色 

 

 

 

 

 

 
。只能使用平台里单色的图标             ，就算项目里有多色图标也会自动去色

 

 

 

 

 

 
。 1.步骤一：在iconfont主页里面找到自己需要的图标 
 

 
 

 
 

 
 

 
 

 
 

 
，加入购物车             。

我们继续选择刚刚那个登录图标












，如何搜索                   ，在上一种方法中已经讲述过了 
 
 
 
 
 
 
 
 
 
 
 
 
，这里就不再说了

2.步骤二：点击导航栏上方的购物车图标


















，然后添加到项目中

也可以一次添加多个图标

点击添加项目之后会有弹窗             ，选择项目 
 
  
 
  
 
  
 
  
 
  
 
  
，再点击确定











，页面会自动弹到该项目里面

3.步骤三：进入项目后

如果是新的文件夹
  
  
  
  
  
  
 ，进入页面之后 
  
  
  
  
  
 ，需要点击生成网址代码

4.步骤四：生成代码之后 


 


 


 


 


 


 
，可以复制代码到相应的CSS文件中 4.步骤四：再定义使用iconfont的样式 .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;} 5.步骤五：使用自定义的标签
 
 
 
 
 
 
，然后将对应的图标编码放在里面

当鼠标移入当前图标  
   
   
   
   
   
  ，会出现一个蒙版 

 

 

 

 

 

 
，可以点击上面的复制代码即可

进入网页中是现代代码

这个时候运行出来页面里面会有问题

原因是因为

 

 

 

 

 

 
，我在引入项目下面生成的font-face时             ，里面的URL引入的网页地址不完整 
 

 
 

 
 

 
 

 
 

 
 

 
，因此我们要补全地址

再去页面里面刷新就可以了

注意：如果之后还要去页面里面添加图标












，可以在生成代码哪里直接更新代码                   ，再复制 
 
 
 
 
 
 
 
 
 
 
 
 
，可以将原本的代码直接覆盖掉


















，避免反复请求

第三种方法：font-class 引用

font-class是unicode使用方式的一种变种             ，主要是解决unicode书写不直观 
 
  
 
  
 
  
 
  
 
  
 
  
，语意不明确的问题 
 

 
 

 
 

 
 

 
 

 
 

 
。

与unicode使用方式相比











，具有如下特点：

兼容性良好
  
  
  
  
  
  
 ，支持ie8+ 
  
  
  
  
  
 ，及所有现代浏览器












。

1.相比于unicode语意明确 


 


 


 


 


 


 
，书写更直观                   。可以很容易分辨这个icon是什么 
 
 
 
 
 
 
 
 
 
 
 
 
。

2.因为使用class来定义图标
 
 
 
 
 
 
，所以当要替换图标时  
   
   
   
   
   
  ，只需要修改class里面的unicode引用


















。

3.不过因为本质上还是使用的字体 

 

 

 

 

 

 
，所以多色图标还是不支持的             。 1.步骤一：这种方法前面的步骤与第二种方法相同

 

 

 

 

 

 
，我就不重复了             ，从主页中搜索图标 
 

 
 

 
 

 
 

 
 

 
 

 
，然后加入购物车












，再添加至项目；（这一步不会的同学参考第二种方法） 2.步骤二：选择Font class                   ，然后点击生成代码 3.步骤三：点击复制代码 
 
 
 
 
 
 
 
 
 
 
 
 
，到html中引用代码

在html中使用link标签引入复制代码


















，注意：由于复制的代码地址不完整             ，需要加上网页请求头（http:）

4.鼠标移入图标上 
 
  
 
  
 
  
 
  
 
  
 
  
，点击复制代码；将代码复制到html文件中

先复制图标代码

在页面中添加相关代码

5.步骤五：刷新页面得到图标

注意：此方法如果要修改图标大小采用font-size属性











，并要使用！important强制改变

还有什么问题欢迎留言！！！！