javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)
問題描述
<i class='iconfont rotate'></i>
.rotate{transform: rotate(90deg)}
圖標(biāo)在頁面中沒有旋轉(zhuǎn)，用的是Chrome瀏覽器，求原因？是不是阿里的矢量圖標(biāo)不支持旋轉(zhuǎn)
<i style='transform: rotate(90deg);'></i>
謝謝，頁面中仍然沒有不變化
問題解答
回答1：首先，你應(yīng)該是下載了阿里iconfont的源碼，源碼包里面有個(gè)demo_fontclass.html，里面有你需要的圖標(biāo)字符的類名和使用說明。以下是一些簡(jiǎn)要的說明：
引入了下載的包里的iconfont.css之后，使用iconfont字體需要輸入class='iconfont icon-xxx'，具體的icon-xxx請(qǐng)參見demo_fontclass.html文件，是根據(jù)你的打包而定的。
其次，如果你只是需要旋轉(zhuǎn)圖標(biāo)，請(qǐng)把.rotate改成.rotate:before，因?yàn)閕confont是通過:before偽元素的content CSS屬性給元素加上的圖標(biāo)。
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>
首先，圖標(biāo)的實(shí)現(xiàn)是:before偽元素控制的
:before偽元素默認(rèn)是行內(nèi)元素（即display: inline）
行內(nèi)元素旋轉(zhuǎn)無效，所以需要給.rotate:before偽元素加上display: inline-block，使其變?yōu)樾袃?nèi)塊元素。
上面HTML代碼效果如下：
transform不支持內(nèi)聯(lián)元素哦~
回答3：我測(cè)試是支持的。
回答4：你確定不能旋轉(zhuǎn)？？我試了下是可以的啊
相關(guān)文章：
1. HTML5不支持frameset一般怎么解決？2. javascript - Vue的計(jì)算屬性底層依賴原理是怎么樣？3. javascript - jquery怎么給select option一個(gè)點(diǎn)擊時(shí)觸發(fā)的事件,如圖 如果選擇自定義觸發(fā)一個(gè)時(shí)間？4. 網(wǎng)頁爬蟲 - python爬蟲用BeautifulSoup爬取<s>元素并寫入字典，但某些div下沒有這一元素，導(dǎo)致自動(dòng)寫入下一條，如何解決？5. 百度地圖api - Android百度地圖SDK，MapView上層按鈕可見卻不可觸，怎么解決？6. mysql 獲取時(shí)間函數(shù)unix_timestamp 問題？7. html5 - canvas中的mousedrag事件，為什么鼠標(biāo)拖出canvas，然后再次移入canvas，drag事件還觸發(fā)8. 新入手layuiadmin，部署到tp中。想用php自已寫一個(gè)后臺(tái)管理系統(tǒng)。9. javascript - react 組件 使用super()報(bào)錯(cuò)10. javascript - es6擴(kuò)展運(yùn)算符...的問題
網(wǎng)公網(wǎng)安備