您的位置：首页技术文章
文章详情页

javascript - iconfont字体图标旋转

更多 QQ空间 微信 QQ好友 腾讯朋友 复制链接
【字号：大 中 小】日期：2023-06-09 10:00:20浏览：23作者：猪猪

问题描述

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

.rotate{transform: rotate(90deg)}

图标在页面中没有旋转，用的是Chrome浏览器，求原因？是不是阿里的矢量图标不支持旋转

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

谢谢，页面中仍然没有不变化

javascript - iconfont字体图标旋转

javascript - iconfont字体图标旋转

javascript - iconfont字体图标旋转

问题解答

回答1：

首先，你应该是下载了阿里iconfont的源码，源码包里面有个demo_fontclass.html，里面有你需要的图标字符的类名和使用说明。以下是一些简要的说明：javascript - iconfont字体图标旋转

引入了下载的包里的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代码效果如下：javascript - iconfont字体图标旋转

回答2：

transform不支持内联元素哦~

回答3：

我测试是支持的。

回答4：

你确定不能旋转？？我试了下是可以的啊

标签： JavaScript
上一条：javascript 如何对两个数组进行比较下一条：javascript - 游戏里物体角色层次渲染逻辑和代码怎么写才好？
相关文章：
1. docker绑定了nginx端口 外部访问不到2. debian - docker依赖的aufs-tools源码哪里可以找到啊？3. 如何判断数组写入数据库有重复的值4. docker gitlab 如何git clone？5. dockerfile - [docker build image失败- npm install]6. angular.js - angular2 有什么cool的loading组件么？7. 想看以前的课程怎么办，8. angular.js - angularjs移动端项目需要引入外部的PC网页，iframe宽高设定100%，显示的内容依然是PC那种效果，不是缩放成适配屏9. html5 - 两个宽高一样的盒子重叠后旋转一定角度，为什么会看到下面的盒子10. macos - mac下docker如何设置代理
排行榜
dockerfile - [docker build image失败- npm install]
dockerfile - [docker build image失败- npm install]
1. docker绑定了nginx端口 外部访问不到
2. 如何判断数组写入数据库有重复的值
3. docker gitlab 如何git clone？
4. debian - docker依赖的aufs-tools源码哪里可以找到啊？
5. angular.js - angularjs移动端项目需要引入外部的PC网页，iframe宽高设定100%，显示的内容依然是PC那种效果，不是缩放成适配屏
6. javascript - js 微信分享出来没有缩略图是怎么回事？
7. docker images显示的镜像过多，狗眼被亮瞎了，怎么办？
8. 想看以前的课程怎么办，
9. macos - mac下docker如何设置代理
10. angular.js - angular2 有什么cool的loading组件么？
热门标签