84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
<i class="iconfont rotate"></i>
.rotate{transform: rotate(90deg)}
圖示在頁面中沒有旋轉，用的是Chrome瀏覽器，求原因？ 是不是阿里的向量圖示不支援旋轉
<i class="icon iconfont icon-leftnav-ss" style="transform: rotate(90deg);"></i>
謝謝，頁面中仍然沒有不變化
首先，你應該是下載了阿里iconfont的源碼，源碼包裡面有個demo_fontclass.html，裡面有你需要的圖示字元的類別名稱和使用說明。 以下是一些簡單的說明：
demo_fontclass.html
引進了下載的套件裡的iconfont.css之後，使用iconfont字體需要輸入class="iconfont icon-xxx"，具體的icon-xxx請參見demo_fontclass.html文件，是根據你的打包而定的。
iconfont.css
class="iconfont icon-xxx"
其次，如果你只是需要旋轉圖標，請把.rotate改成.rotate:before，因為iconfont是透過:before偽元素的content CSS屬性給元素加上的圖標。
.rotate
.rotate:before
:before
content
先上程式碼
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="iconfont.css"> <style type="text/css"> .rotate:before { font-size: 40px; display: inline-block; transform: rotate(90deg); } </style> </head> <body> <i class="iconfont icon-48xiaoshifahuo rotate"></i> <i class="iconfont icon-24xiaoshifahuo rotate"></i> </body> </html>
首先，圖示的實作是:before偽元素控制的
:before偽元素預設為行內元素（即display: inline）
display: inline
行內元素旋轉無效，所以需要給.rotate:before偽元素加上display: inline-block，使其變成行內塊元素。
display: inline-block
上面HTML程式碼效果如下：
transform不支援內聯元素哦~
我測試是支持的。
你確定不能旋轉？ ？我試了一下是可以的啊
首先，你應該是下載了阿里iconfont的源碼，源碼包裡面有個
demo_fontclass.html，裡面有你需要的圖示字元的類別名稱和使用說明。以下是一些簡單的說明：
引進了下載的套件裡的
iconfont.css之後，使用iconfont字體需要輸入class="iconfont icon-xxx"，具體的icon-xxx請參見demo_fontclass.html文件，是根據你的打包而定的。其次，如果你只是需要旋轉圖標，請把
.rotate改成.rotate:before，因為iconfont是透過:before偽元素的contentCSS屬性給元素加上的圖標。Update
先上程式碼
首先，圖示的實作是
:before偽元素控制的:before偽元素預設為行內元素（即display: inline）行內元素旋轉無效，所以需要給
.rotate:before偽元素加上display: inline-block，使其變成行內塊元素。上面HTML程式碼效果如下：
transform不支援內聯元素哦~
我測試是支持的。
你確定不能旋轉？ ？我試了一下是可以的啊