字体图标（字体图标库）

科技前沿 • 2025-05-23 12:05 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

什么是字体图标？

一种处理简单、单一颜色的图片，例如例如搜索框里的“搜索”放大镜：

讯享网

以及转发网页链接的图标等等。

字体图标展示的是图标，其本质是字体。

字体图标的优点：

轻量：渲染快、体积小、可以有效降低服务器请求次数。
灵活：颜色、尺寸等样式可以修改。
兼容性强：几乎兼容所有主流浏览器。
使用方便：下载字体包即可使用字体图标。

附：阿里巴巴矢量图标库：https://www.iconfont.cn/

字体图标的下载:

登录阿里巴巴矢量图标库，选择需要的图标库。

再选择需要的图标，添加至购物车。

在购物车里把图标们添加至项目，并下载到本地。

字体图标的使用①——Unicode编码：

引入iconfont.css外部样式表。

复制粘贴图标对应的Unicode编码。

再给标签内的文字设置文字字体。

字体图标的使用②——类名：

引入iconfont.css外部样式表，如图所示的。

调用图标对应的类名，且必须调用两个类名。

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

icon-xxxx:图标对应的类名。

两种使用方法演示如下：

打开浏览器查看效果：

补充：

如果图标库没得项目需要的图标，你就去找设计师妹妹拿SVG矢量图，然后到IconFont网站上上传图标，再下载使用。（大屑）

什么是平面转换？

使用 transform 属性实现元素位移、旋转、缩放等效果。

1. 平面转换——位移translate

语法：

transform:translate(水平移动距离，垂直移动距离)
取值可为像素单位数值或百分比
X轴正向为右，Y轴正向为下

translate应用——绝对定位居中

2. 平面转换——旋转rotate

语法：

transform:ratate(角度)
取值为正，顺时针旋转。
取值为负，逆时针旋转。

3. 平面转换——转换原点transform-orgin

语法：

transform-origin: 原点水平位置原点垂直位置;
默认原点是盒子中心，可配合旋转、缩放使用。
取值可为方位名词left、right、top、buttom、center。
取值可为像素单位。
取值可为百分比（参照盒子自身尺寸）。

4. 平面转换—缩放scale 缩放可以改变元素的尺寸

语法：

transform:scale(x轴缩放倍数，y轴缩放倍数);
通常只设置一个值，表示x轴和y轴等比例缩放
值大于1表示放大，值小于1表示缩小

5. 平面转换—多重转换 使用transform符合属性实现多形态转换，要注意属性的顺序。

例：

渐变是多个颜色线性变化的视觉效果，常用于设置盒子的背景。