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>

　　顯示效果：略

 

　

　　總結：

　　其實圖標和按鈕真的沒什么不同，按鈕能用的樣式，圖標也能用，所以圖標我只寫了這么點樣式的說明。