字体图标（字体图标库）



什么是字体图标？

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

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

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

字体图标的优点：

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

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

字体图标的下载:

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

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

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

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

1. 引入iconfont.css外部样式表。
2. 复制粘贴图标对应的Unicode编码。
3. 再给标签内的文字设置文字字体。

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

1. 引入iconfont.css外部样式表，如图所示的。
2. 调用图标对应的类名，且必须调用两个类名。
   • 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符合属性实现多形态转换，要注意属性的顺序。

例：

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/22310.html