本文共 1917 字，大约阅读时间需要 6 分钟。

越学心里越没底，毕竟知识的增长伴随着问题的增长，所以我应该感到幸运，我学到东西了！

可以像使用字体一样，使用图标；轻量性，灵活性，兼容性。

下面是最后生成的压缩包解压后，文件夹里面的内容，其中有用的有fonts和style.css，这两个拷贝到项目文件夹里面就可以了！

/*下面是css文件里面的代码，这部分是固定的格式*/@font-face {
     font-family: 'icomoon';     /*这个可以更改*/  src:  url('../fonts/icomoon.eot?g2i2pg');  src:  url('../fonts/icomoon.eot?g2i2pg#iefix') format('embedded-opentype'),    url('../fonts/icomoon.ttf?g2i2pg') format('truetype'),    url('../fonts/icomoon.woff?g2i2pg') format('woff'),    url('../fonts/icomoon.svg?g2i2pg#icomoon') format('svg');  font-weight: normal;  font-style: normal;  font-display: block;}

/*这部分不太重要！只有font-family比较重要！*/[class^="icon-"], [class*=" icon-"] {
     /* use !important to prevent issues with browser extensions that change fonts */  font-family: 'icomoon' !important;  speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  line-height: 1;  /* Better Font Rendering =========== */  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

/*这个是字体的编码*/.icon-all:before {
     content: "\e900";}.icon-auto:before {
     content: "\e901";}.icon-bold:before {
     content: "\e902";}.icon-bussiness-man:before {
     content: "\e903";}.icon-dollar:before {
     content: "\e904";}.icon-inspection:before {
     content: "\e905";}.icon-integral:before {
     content: "\e906";}.icon-language:before {
     content: "\e907";}.icon-left-button:before {
     content: "\e908";}.icon-loading:before {
     content: "\e909";}.icon-message-center:before {
     content: "\e90a";}

/*定义样式的时候！*/      span{
               font-size: 10rem;            color: #e74c3c;            text-shadow: 0 0 1rem gainsboro;        }        span:last-child{
               font-size: 5rem;            color: #449fdb;        }

转载地址：http://vgjv.baihongyu.com/