html字体图标的使用

文字是矢量图 》》 放大不会失帧

矢量图是由 点 线  面 构成的图

1.点是没有大小的

2.线是没有粗细的

3.面是没有厚度的

这种可以修改大小和颜色的图形  称为 字体图标

字体图标的优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便：

1. 下载字体包

2. 使用字体图标

图标的来源一般是来自于  相关的资源网站

图标库

Iconfont：iconfont-阿里巴巴矢量图标库

上传矢量图：

思考：如果图标库没有项目所需的图标怎么办？

答：IconFont网站上传矢量图生成字体图标

1. 与设计师沟通，得到SVG矢量图

2. IconFont网站上传图标，下载使用

使用：

使用图标整体而言分为两步

指定你想使用那一种字体

你想使用这种字体中的那一个文字

1.下载字体包：

登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

2.使用字体图标 – 类名：

引入字体图标样式表  <link>

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等

icon-xxx：图标对应的类名

<link rel="stylesheet" href="./download/font_3214403_kc7ubvxzj8h/iconfont.css">

 <i class="iconfont icon-gouwuche"></i>

常用：使用在线引入图标：

由于需要新的图标要重新下载覆盖之前的文件，所以需要使用在线图标。

    <!-- 在线引入字体图标，注意前面要加http: -->

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css">

    <i class="iconfont icon-zhaoxiangji"></i>
————————————————
版权声明：本文为CSDN博主「头发茂盛男孩」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_55960697/article/details/123261520