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

字体图标的使用

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

接下来就说说字体图标如何使用：
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的字体名称必须与开头声明里的名称相同。
效果如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    @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;
    }  
        span {
            font-size: 50px;
            color: blue;
            font-family: "icomoon"; 
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

6.PNG

最后编辑于：2018.06.13 17:17:43