成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)

瀏覽：135日期：2023-06-09 10:00:20

問題描述

<i class='iconfont rotate'></i>

.rotate{transform: rotate(90deg)}

圖標(biāo)在頁面中沒有旋轉(zhuǎn)，用的是Chrome瀏覽器，求原因？是不是阿里的矢量圖標(biāo)不支持旋轉(zhuǎn)

<i style='transform: rotate(90deg);'></i>

謝謝，頁面中仍然沒有不變化

javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)

javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)

javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)

問題解答

回答1：

首先，你應(yīng)該是下載了阿里iconfont的源碼，源碼包里面有個demo_fontclass.html，里面有你需要的圖標(biāo)字符的類名和使用說明。以下是一些簡要的說明：javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)

引入了下載的包里的iconfont.css之后，使用iconfont字體需要輸入class='iconfont icon-xxx'，具體的icon-xxx請參見demo_fontclass.html文件，是根據(jù)你的打包而定的。

其次，如果你只是需要旋轉(zhuǎn)圖標(biāo)，請把.rotate改成.rotate:before，因為iconfont是通過: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.piao2010.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)的實現(xiàn)是:before偽元素控制的

:before偽元素默認是行內(nèi)元素（即display: inline）

行內(nèi)元素旋轉(zhuǎn)無效，所以需要給.rotate:before偽元素加上display: inline-block，使其變?yōu)樾袃?nèi)塊元素。

上面HTML代碼效果如下：javascript - iconfont字體圖標(biāo)旋轉(zhuǎn)

回答2：

transform不支持內(nèi)聯(lián)元素哦~

回答3：

我測試是支持的。

回答4：

你確定不能旋轉(zhuǎn)？？我試了下是可以的啊

標(biāo)簽： JavaScript
相關(guān)文章：