javascript - iconfont字體圖標旋轉
問題描述
<i class='iconfont rotate'></i>
.rotate{transform: rotate(90deg)}
圖標在頁面中沒有旋轉，用的是Chrome瀏覽器，求原因？是不是阿里的矢量圖標不支持旋轉
<i style='transform: rotate(90deg);'></i>
謝謝，頁面中仍然沒有不變化
問題解答
回答1：首先，你應該是下載了阿里iconfont的源碼，源碼包里面有個demo_fontclass.html，里面有你需要的圖標字符的類名和使用說明。以下是一些簡要的說明：
引入了下載的包里的iconfont.css之后，使用iconfont字體需要輸入class='iconfont icon-xxx'，具體的icon-xxx請參見demo_fontclass.html文件，是根據你的打包而定的。
其次，如果你只是需要旋轉圖標，請把.rotate改成.rotate:before，因為iconfont是通過:before偽元素的content CSS屬性給元素加上的圖標。
Update先上代碼
<!DOCTYPE html><html><head> <title></title> <meta charset='utf-8'> <link rel='stylesheet' type='text/css' href='http://www.gepszalag.com/wenda/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）
行內元素旋轉無效，所以需要給.rotate:before偽元素加上display: inline-block，使其變為行內塊元素。
上面HTML代碼效果如下：
transform不支持內聯元素哦~
回答3：我測試是支持的。
回答4：你確定不能旋轉？？我試了下是可以的啊
相關文章：
1. javascript - vue監聽data中的某一數組的某一項2. 為什么我寫的PHP不行3. html - css布局問題，背景用用div畫的三角形是否用absolute與z-index來定位與規定在下方是否是個好方案4. 我 想好好學精通一門技術，大家用的走過的路，幫我指點指點唄 讓我少走了彎路和坑的苦 ，自學，自己摸5. 正則表達式 - nginx 正則，如何匹配不以/結尾且不以.xml .html .htm結尾6. Android 高德地圖如何移除添加的某個marker？7. 淺談vue生命周期共有幾個階段？分別是什么？8. index.php錯誤，求指點9. java - web端百度網盤的一個操作為什么要分兩次請求服務器, 有什么好處嗎10. html5 - 如何實現圖中的刻度漸變效果？
網公網安備