semantic-ui 图标

　　semantic-ui提供了很多的图标，基本常用的在官网上面都能找到。要想记住这么多图标是不可能的，但是也是有简便方法记忆。

　　首先，图标其实和按钮的区别基本没有，要说有的话，也就是基础样式的大小不同吧，按钮较大一点，当然也是可以加大小的值来设置。

　　学习semantic的图标有这个简洁方法：

　　1、图标只能使用i标签，不能使用div、span、button标签。

　　2、按钮的名称全部转为小写之后，下载class中，然后加一个icon即可。

 

1、基础图标

<i class="home icon"></i>
<i class="setting icon"></i>
<i class="alarm icon"></i>

　　

 

2、定义图标大小 

　　在图标的class中直接添加大小值即可。

<i class="home mini icon"></i>
<i class="setting large icon"></i>
<i class="alarm huge icon"></i>

　　

3、设置图标颜色

　　和按钮没区别，直接在图标的class中加颜色即可

<i class="home mini red icon"></i>
<i class="setting large blue icon"></i>
<i class="alarm huge pink icon"></i>

　　

4、动画按钮

　　在semantic ui中，提供了三种按钮动画，分别是左右移动、上下移动、淡入淡出

　　因为要加动画效果，所以class要加一个animated

　　因为要动画，那么就必须有些东西是隐藏的，有些东西是显示的，所以显示的内容的class设置为visible content，隐藏的内容设置为hidden content。

　　如果不指定动画，则默认是左右移动，那么上下移动和淡入淡出就是在外层的div或者span上加一个vartical，fade即可

<div class="ui animated button">
	<div class="visible content">家</div>
	<i class="hidden content">
		<i class="home icon"></i>
	</i>
</div>

　　显示效果：略

 

　

　　总结：

　　其实图标和按钮真的没什么不同，按钮能用的样式，图标也能用，所以图标我只写了这么点样式的说明。