iconfont圖標(biāo)由link引入:
<link rel="stylesheet" href="../fonts1/iconfont.css">
<link rel="stylesheet" href="../fonts/iconfont.css">
<link rel="stylesheet" href="../css/aik.css">
列如:<i>標(biāo)簽
<i class="icon iconfont "></i>
class鏈接iconfont路徑
再引進iconfont圖標(biāo)庫的名稱:如下圖:
image
image
iconfont引入圖標(biāo)方式獲取圖標(biāo)名稱即可:
如:<i class="icon iconfont icon-angle-down"></i>
切勿:加點!!!
加點無效馁龟!
下面如何:給iconfont加旋轉(zhuǎn)叶雹!
<i>標(biāo)簽先轉(zhuǎn)換成行內(nèi)塊元素:
i{
display: inline-block;
}
必須給i標(biāo)簽轉(zhuǎn)換成行內(nèi)塊元素:否則無法旋轉(zhuǎn)7鞣狻!管引!
給<i>標(biāo)簽轉(zhuǎn)換成塊元素是無法正常旋轉(zhuǎn)的。
給<i>加旋轉(zhuǎn)必須由 &:hover:
如下:
i{
display: inline-block;
&:hover{
transform: rotate(180deg);
transition: 2s;
}
}
這是給<i>標(biāo)簽的iconfont圖標(biāo)加180度的旋轉(zhuǎn):過度2秒闯两。