css基础08-字体图标

89 阅读 0 评论 59 点赞

我是靠谱客的博主细心大树，这篇文章主要介绍css基础08-字体图标，现在分享给大家，希望可以做个参考。

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

可以像使用字体一样，使用图标；轻量性，灵活性，兼容性。
矢量，支持所有现代浏览器，低版本IE浏览器；智能渲染单色和CSS3的渐变色；版权上有限制，创作字体图标费时间。@font-face（有固定格式代码）。
www.iconfont.cn 阿里巴巴字体图标库（需要登录）
https://icomoon.io/app/#/select 字体图标在线生成

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

最后生成的文件夹内容

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
/*下面是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;
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*这部分不太重要！只有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;
}

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*这个是字体的编码*/
.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";
}

复制代码

1
2
3
4
<!--这个是使用的时候-->
<span class="icon-all"></span>
<span class="icon-auto"></span>

复制代码

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