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='https://www.haobala.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. 为什么span的color非要内联样式才起作用？2. javascript - swiper.js嵌套了swiper 初始设置不能向下一个滑动 结束后重新初始3. angular.js - angular-ui-bootstrap 报错无法使用？4. docker - 如何修改运行中容器的配置5. python - 如何修改twisted自带的日志输出格式?6. 高并发写入和更新mysql7. 在cmd下进入mysql数据库，可以输入中文，但是查看表信息，不显示中文，是怎么回事，怎新手，请老师8. 请问一下各位老鸟 我一直在学习独孤九贱 现在是在tp5 今天发现 这个系列视频没有实战9. 老师，请问我打开browsersync出现这个问题怎么解决啊？10. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？
网公网安备