CSS常用的外部字体及icomoon图标的使用方法

目录：html5+css3网页设计与制作目录

1.常用的CSS外部字体,开源免费

(1)font-awesome

https://www.bootcss.com/p/font-awesome/

(2)阿里巴巴矢量图标库

https://www.iconfont.cn/

(3)矢量图标素材分享网

https://icomoon.io/

2.icomoon图标的使用方法

(1)下载后放到网站目录fonts文件夹下

(2)字体文件后缀

.TTF或.OTF，适用于Firefox 、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone
.WOFF，大多数浏览器都支持，最为推荐
这些字体的格式在代码中应按照下面的顺序显示：
.eot .woff .ttf/.otf .svg

(3)字体文件的引用

(转自:https://www.runoob.com/cssref/css3-pr-font-face-rule.html)

CSS3 @font-face 规则:指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face

{
font-family: myFirstFont;
src: url(\'Sansation_Light.ttf\'),
url(\'Sansation_Light.eot\'); /* IE9 */
}

属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url(\'Sansation_Light.ttf\')

如果字体文件是在不同的位置，请使用完整的URL：

src: url(\'http://www.w3cschool.css/css3/Sansation_Light.ttf\')

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
    font-family: \'icomoon\';
    src:  url(\'../fonts/icomoon.eot?tomleg\');
    src:  url(\'../fonts/icomoon.eot?tomleg#iefix\') format(\'embedded-opentype\'),
      url(\'../fonts/icomoon.ttf?tomleg\') format(\'truetype\'),
      url(\'../fonts/icomoon.woff?tomleg\') format(\'woff\'),
      url(\'../fonts/icomoon.svg?tomleg#icomoon\') format(\'svg\');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

目录位置如下:

(4)图标的使用

使用CSS中的before或者after设置图标

HTML5代码:

<div class="shopcar">
            我的购物车
            <i class="count">8</i>
        </div>

CSS代码如下:

.shopcar::before {
    content: \'\e93a\';
    font-family: \'icomoon\';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: \'\e920\';
    font-family: \'icomoon\';
    margin-left: 10px;
}

效果如下:

参考文章:

https://www.cnblogs.com/wax-o/p/12055435.html

https://blog.csdn.net/goodgirl1991/article/details/50416974