使用字体图标的话,旋转无效的问题

因为项目需要,在代码中引用了返回的箭头字体图标">",但是在不同的页面中,可能样式相同,但是箭头的朝向有所不同,这个时候感觉再引入上下左右4个朝向的箭头又有点麻烦。于是想起了之前css中的rotate函数,直接使用这个岂不是360度怎样旋转都可以,简直nice。

但是在代码中直接添加,貌似没有效果啊:


错误写法

想了半天到底为啥,终于想起来一件事,我这是使用的字体图标,相当于文字啊,直接旋转肯定不行的,于是

咱加上一句,将其转换为块元素试试,


正确写法

因为我这里要放在一行并列显示,所以用了inline-block,如果没有这个要求,block也是可以的。

哈哈,大功告成

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,721评论 0 8
  • (这是15年初学css时记的笔记) 选择器 简单选择器 标签选择器 直接把标签名加前面。 类选择器 用.+ cla...
    burningalive阅读 1,053评论 0 0
  • 前言:有时候做一些页面,图标很多,全都以图片形式加载的话,整个文件体积会变得非常大,不仅会增加额外的http请求,...
    银月silvermoon阅读 4,164评论 0 4
  • 随着手机的普及,移动端的开发也成了一个重要的方向,但由于设备的不统一会造成一些兼容性问题, 1、安卓浏览器看背景图...
    阳光嘚猴子阅读 36,596评论 0 12
  • 随着手机的普及,移动端的开发也成了一个重要的方向,但由于设备的不统一会造成一些兼容性问题, 1、安卓浏览器看背景图...
    聂嘚吧嘚阅读 1,952评论 3 14