如何简单高效的定义图标规格大小、组合使用以及旋转
发表于:2018/05/29

系统内置优秀的规格选项,即你可以自由的定义图标大小,使之满足你的使用。
`

规格选项

系统采用的规格是流行的rem,而不是传统的px,应该说这是一个广泛的新标准。

现在手机屏幕分辨率越来越多了,假设我们的网页需要适配的iPhone4(320px),iPhone6(375px),iPhone6 Plus(414px)。
我们的需求是,当用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的文字、图片、按钮大小。
(1)iPhone4的时候,希望网页的内容文字大小12px=12(320/320)px,按钮的大小是240px。
(2)Iphone6的时候,虚妄网页的内容文字大小14px=12(375/320)px,按钮的大小是280px,等比缩放。
(3)Iphone6 Plus的时候,虚妄网页的内容文字大小15.5px=12*(414/320)px,按钮的大小是310px,等比缩放。以前的做法在rem概念没引入前我们的做法是,以最小的屏幕(iPhone)做一版数据出来,然后通过js去控制viewport 的 initial-scale (网页缩放比例)。
如:iPhone4下:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

rem(font size of the root element)是指相对于根元素的字体大小的单位(可以联想一下em)。也就是比如我定义
:html{ font-size:14px}
`

那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是

.test-box{
        font-size:2rem;
       /*font-size:28px;*/
       /*2*14px/
}
`

我们可以理解为,一旦根节点html 定义的 font-size 变化,那么整个网页中运用到 rem的也会变化。
以上内容是根据网络知识整理,如果你听着费解,就直接略过,只要记得rem是一种更加先进的单位,包括[bootstrap 4.0](http://code.z01.com/v4 "bootstrap 4.0")、[Zoomla!逐浪CMS3.9](http://www.z01.com "Zoomla!逐浪CMS3.9")都已经是完美兼容就好了。

规格大小

系统内置14个规格,分别是:

.zi_lg { font-size: 1.8rem; line-height: 0.8rem;vertical-align: -.08rem; }
.zi_sm { font-size: .8rem; }
.zi_1x { font-size: 1rem; }
.zi_2x { font-size: 2rem; }
.zi_3x { font-size: 3rem; }
.zi_4x { font-size: 4rem; }
.zi_5x { font-size: 5rem; }
.zi_6x { font-size: 6rem; }
.zi_7x { font-size: 7rem; }
.zi_8x { font-size: 8rem; }
.zi_9x { font-size: 9rem; }
.zi_10x{ font-size: 10rem;}
.zi_11x{ font-size: 11rem;}
.zi_12x{ font-size: 12rem;}

`
即你可以采用这些规格来定义,如:

<i class="zi zi_user zi_3x"></i>

-

<i class="zi zi_user zi_12x"></i>

`
这两个图标的具体表现:

`

组合图标

你可以将两个图标组合起来用,一般推荐是用圆形和方形作为放大,中间内置小图标,从而形成丰富的元素,也就等同于“创造新图标”了。
`
这是一系列组合应用图标的方法:


/*默认组合使用:*/
<span class="zi_group zi_2x">
  <i class="zi zi_squareLine zi_group2x"></i>
  <i class="zi zi_digg zi_group1x"></i>
</span>
<br><br>

/*反转颜色组合使用:*/
<span class="zi_group zi_2x">
  <i class="zi zi_circle zi_group2x"></i>
  <i class="zi zi_digg zi_group1x zi_inverse"></i>
</span>
<br><br>

/*自定颜色组合使用:*/
<span class="zi_group zi_2x">
  <i class="zi zi_squareLine zi_group2x"></i>
  <i class="zi zi_digg zi_group1x"  style="color:Tomato"></i>
</span>

效果呈现:

旋转图标

特效名称 引用方法
旋转90度 zi_rotate90
旋转180度 zi_rotate180
旋转270度 zi_rotate270
水平投影 zi_flipLevel
垂直投影 zi_flipVertical
本文档基于Zoomla!逐浪CMS MarkDown编辑器输出。