字体图标的使用方法（图文模式）

字体图标的使用

不得不说字体图标使用起来真的很方便，能实现图片的效果，但实施起来却很方便，因为你可以把字体图标当作文字一样去随意修改，比如修改颜色、修改大小等，都十分易于去实现。

• 接下来就说说字体图标如何使用：
  1、打开网站 icomoon.io
  （1）点击右上角 Icomoon App
  
  1.PNG
  
  (2)选择要使用的图标，点击右下角Generate Font
  
  2.PNG
  
  (3)即可预览到已选择的图标，再点击右下角Font里的download（font旁边有设置按钮，可以设置名称和字体支持的浏览器版本。可自行选择），在桌面解压下载的文件包。
  （4）找到里面的fonts文件夹。
  
  3.PNG
  
  （5）将fonts文件夹复制到和你正在做的网页的同一个文件夹下。
  
  4.PNG

2、在style标签里加入这段话：

@font-face {    /*声明字体*/
   font-family: 'icomoon';
   src: url('fonts/icomoon.eot?7kkyc2');
   src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }  

3、然后引用字体图标。
（1）打开解压后的文件夹，找到demo.html，打开该网页，复制你需要的图标后面的像手机一样的标志，再粘贴到span标签内。

5.png

（2）接下来就可以定义字体图标的属性了。

span {
           font-size: 50px;
           color: blue;
           font-family: "icomoon"; 

       }

！！此时要注意font-family的字体名称必须与开头声明里的名称相同。
效果如下图：

    
    
    


    

6.PNG