用字体在网页中画ICON图标(笔记)

CSS Sprite

一般情况下，需要保存为PNG-24的文件格式。

先确定好小图标的大小，再根据小图标的大小来摆放小图标。

清除浏览器默认样式（并引入事先准备好的CSS文件）：<link rel="stylesheet" href="css/ ">

利用background-image属性引入小图标，然后用background-position属性定位到要显示的位置。

font+HTML

https://icomoon.io（图标库）
提供简单编辑小图标的功能，如果想创作新的字体图标，只能通过专业的矢量图形软件（可上传到图标库中（SVG格式））

如何把你的图标转换成web字体（文章）： http://flowerboys.cn/font/

先从im网站上下载所需要的图标，并将fonts文件夹拷贝到网页所在的文件夹中，其中有4种字体文件格式，由于每种字体对浏览器支持的程度不一样，必须同时引入这些字体文件。

在CSS中输入：

@font-face{
font-family:自定义字体名称;
src:引入自定义字体文件路径;
font-weight:
font-size:
}

eg.

@font-face{
            font-family:"imooc-icon";
            src:url(../fonts/icomoon.eot) format("embedded- opentype")
            ,url(../fonts/icomoon.woff) format("woff")
            ,url(../fonts/icomoon.ttf) format("truetype")
            ,url(../fonts/icomoon.svg) format("svg");
            font-weight: normal;
            font-style: normal;
          }

再回到html结构，复制小图标的class名称，回到CSS样式表中：

.imooc-icon{
            font-family:"imooc-icon";
            font-style: normal;
            font-weight: normal;
            font-size: 64px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:gray-scale;
        }

打开之前下载的图标文件中的demo文件，复制小图标的16进制编码，粘贴到HTML结构中小图标对应的标签对里面，并在16进制数字前面加上 &#x 即可。

解决在IE8及以下浏览器中无法加载字体图标的问题：

@font-face{
            font-family:"imooc-icon";
            src:url("../fonts/icomoon.eot");/*IE9兼容模式*/ 
            src:url("../fonts/icomoon.eot?#iefix") format("embedded- opentype")
            ,url("../fonts/icomoon.woff") format("woff")
            ,url("../fonts/icomoon.ttf") format("truetype")
            ,url("../fonts/icomoon.svg") format("svg");
            font-weight: normal;
            font-style: normal;
          }

font+CSS

将小图标对应的HTML代码通过CSS属性写入样式文件，然后调用class名称即可。

:before伪元素: 创建一个虚假的元素，并插入到目标元素内容之前。
content属性: 与:before及:after伪元素配合使用，来插入生成内容。

@font-face{
            font-family:"imooc-icon";
            src:url("../fonts/icomoon.eot");/*IE9兼容模式*/ 
            src:url("../fonts/icomoon.eot?#iefix") format("embedded- opentype")
            ,url("../fonts/icomoon.woff") format("woff")
            ,url("../fonts/icomoon.ttf") format("truetype")
            ,url("../fonts/icomoon.svg") format("svg");
            font-weight: normal;
            font-style: normal;
          }


.imooc-icon{
            font-family:"imooc-icon";
            font-style: normal;
            font-weight: normal;
            font-size: 64px;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:gray-scale;
        }

打开demo文件，用它给出的名称作为class名称，打开CSS样式

.icon-envelop:before{
            content: "\e900";

接着就可以给小图标使用该class名称。

其它

打开demo文件，查看源代码，打开样式文件，就可以直接用im应用帮我们生成好的代码，把这些样式拷贝到项目中即可