一、字体图标

字体图标主要用于网页中通用、常用的一些小图标；

精灵图的缺点：1、图片文件大； 2、图片放大和缩小会有失真的问题； 3、一旦图片制作完成想要更换非常复杂。

字体图标iconfont，展示的是图标，但是本质是字体；字体就可以调整字体大小（不失真），改变文字。

字体图标优点：

1、一个字体图标比一系列的图片小，一旦字体加载的了，图标马上就会渲染出来，减少了服务器请求。

2、灵活：可改颜色、大小。

3、兼容性：几乎支持所有的浏览器。

但是，字体图标不能替代精灵图，字体图标的样式结构简单，遇到复杂的背景图片，还是需要精灵图。

1.1 字体图标的使用

1、下载字体图标。

第一个网址（国外的服务器，速度较慢）：Icon Font & SVG Icon Sets ❍ IcoMoon

第二个网址：iconfont-阿里巴巴矢量图标库

阿里巴巴的，好用，强推！

第一步，打开iconmoon网站。

第二步：点击红圈选中区域。

然后就会看到如下图所示的页面，会看到很多图标：

第三步，喜欢哪个选中哪个，点击之后还有提示，

如果这些里面都没有我想要的，就点击下图中的红圈部分：

进入下图界面以后，选择自己想要的，就可以点击Add：

还可以对选择的图标进行编辑，旋转缩放等。

第四步，选好了以后，点击下图的红圈部分，生成字体：

下载字体：

把下载下来的压缩包解压，在众多文件夹中最重要的就是fonts文件夹；fonts文件夹放在页面根目录。

以上是用第一个网址下载的，用第二个阿里巴巴的网站的时候，是先选中图标，加入购物车，然后点购物车的图标，去购物车里面下载，这里点添加项目，再下载。

2、引入字体图标（以阿里巴巴的网址下载的字体图标为例子）

第一步，给解压后的文件夹改名为iconfont.（iconfont文件夹里面有iconfont.css文件）

第二步，在要引入的页面的html文件写link；

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

第三步，在body里面写行内标签；

第一个类名必须叫iconfont（因为在iconfont.css文件中有iconfont类，这个类里面有font-family,还有一些其他属性，有这个类，就不会一调用就是个小方块），第二个类名叫什么？打开如下图选中的文件夹

打开这个html文件（必须要联网），然后切换到Font class，

每个图标下面的.ico什么什么的就是类名。 html中写类名不要那个点，css中才要。

<i class="iconfont icon-favorites-fill"></i>

总结：下载字体图标，link引入样式表，写类名调用样式表中的具体某个图标。

注意：用i标签是改不了字体图标大小的，这个标签的优先级小于iconfont类标签，所以要在类标签里面改。

如果工作中的图标在iconfont里面没有，可以上传矢量图（后缀名是svg）：

1、打开iconfont，点击红色圈住的图标：

点击上传图标：

选择对应的svg图片传上去，之后点提交，可以点去除颜色提交，也可以点保留颜色提交；

然后加入购物车，再下载下来。

二、平面转换（属性都是transform）

平面+转换：平面就是由x和y坐标轴组成的平面；转换就是2D转换（包括位移、旋转、缩放）。

坐标图：

属性：transform

1、位移

transform: translate(水平移动距离, 垂直移动距离)

取值（正负均可）：像素单位数值；百分比（参照物为盒子自身尺寸）

translate()如果只给出一个值, 表示x轴方向移动距离；

单独设置某个方向的移动距离：translateX() & translateY()。（X、Y是大写）

想要鼠标移动到父级盒子，子级盒子位移：

.father:hover .son {/* transform: translate(100px, 50px); *//* 百分比: 盒子自身尺寸的百分比 *//* transform: translate(100%, 50%); *//* transform: translate(-100%, 50%); *//* 只给出一个值表示x轴移动距离 *//* transform: translate(100px); */transform: translateY(100px);}

关于绝对居中：

若是两个盒子都是div，可以用margin来居中；

但是如果用了定位，就不能用margin居中了，用transform;

.father {position: relative;width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {position: absolute;left: 50%;top: 50%;/* margin-left: -100px;margin-top: -50px; */transform: translate(-50%, -50%);width: 203px;height: 100px;background-color: pink;          }

2、旋转

transform: rotate(角度);

角度单位是deg，取值正负均可，取值为正, 则顺时针旋转；取值为负, 则逆时针旋转。

转换原点：

默认圆点是盒子中心点；

transform-origin: 原点水平位置原点垂直位置;（这里是空格隔开）

属性的取值可以是：

方位名词（left、top、right、bottom、center），像素单位数值，百分比（参照盒子自身尺寸计算）

多重转换：

想要既有位移的转换，又有旋转的转换；

/* 边走边转 */
transform: translate(600px) rotate(360deg);

transform这里是复合属性，用空格隔开，必须先写位移的translate，再写rotate。

不能先写旋转，因为如果先旋转，x轴和y轴会变方向，位移就会出问题。

3、缩放

transform: scale(x轴缩放倍数, y轴缩放倍数);

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放；

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小；

4、渐变

渐变是多个颜色逐渐变化的视觉效果；

一般用于设置盒子的背景；

 background-image: linear-gradient(transparent,rgba(0,0,0, .6));

上面的代码就是说从透明变到透明度为0.6的黑色。

CSS——字体图标、平面转换、缩放相关推荐

css 字体图标更改颜色_在CSS中更改字体
css 字体图标更改颜色 CSS字体属性 (CSS font properties ) Font properties in CSS is used to define the font family ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...
CSS——web字体与CSS字体图标
文章目录 web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML 第一步:在样式里面声明字体: 告诉别人我们自己定义的字体第 ...
iconfont字体图标以及css字体图标在线制作和使用（推荐）
字体图标的制作和使用呢,也不一定非要自己去 https://icomoon.io/ 网站制作,那样子貌似有点麻烦,那么这里给大家一种更简便的操作方式,方便快捷的制作并使用字体图标,同样的,我们还是离不 ...
解决css字体图标如何下载使用
步骤一:建立一个文件夹,因为文件有点多,怕搞乱然后里面建立一个html文件.我建立的名字是iconfont.html.如下图: 步骤二:从网上下载字体图标.http://icomoon.io(免费的 ...
CSS字体图标的生成和使用
字体图标随着众多项目的开发,变得不可或缺,它在一定程度上减少了过度使用图片导致的资源占用问题,图片失真问题,通过代码的方式让图标更加轻量化,同时也提高了项目的运行性能哦,下面给大家简单分享下自己学习的 ...
Web前端开发 icon图标转 web字体图标
在我们大多数的项目当中,icon图标是必不可少的,有的一个一个单独切片,或者将它们拼接组合起来(图片合成技术: css sprite )从而减少请求,方便调用等,但是随着项目的逐渐扩展壮大,图标越来越 ...
react+webpack 引入字体图标
在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...
elementUI自定义字体图标
上一篇<ionic(mui.elementUI)自定义字体图标>写一部分了.重要的点,再强调一下下. 在阿里妈妈上的项目中编辑相关属性: elementUI 的前缀是el-icon,Fon ...

CSS——字体图标、平面转换、缩放