前言

有时候找不到刚好合适的字体图标,只好找个差不多的然后再通过css再进行调整。

调整

水平反转

.icon-shexiangji1 {
color: #f64e78;
font-size: 20px;
display: inline-block;
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}

垂直反转

.icon-shexiangji1 {
color: #f64e78;
font-size: 20px;
display: inline-block;
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1)
}

效果图

原图

水平反正后

Iconfont——实现字体图标的反转的更多相关文章

  1. iconfont阿里字体图标的使用方法

    我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...

  2. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  3. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  4. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  5. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  6. iconfont.cn阿里巴巴矢量图下载字体图标实战

    1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...

  7. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  8. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

  9. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

随机推荐

  1. vxlan 跨网段虚拟机迁移

    一些服务器虚拟化软件可实现在两台虚拟化的物理服务器之间对虚拟机做动态迁移,迁移至另一中心的虚拟机不仅保留原有IP地址,而且还保持迁移前的运行状态(如TCP会话状态),所以必须将涉及虚拟机,迁移的物理服 ...

  2. [转帖]说一说JVM双亲委派机制与Tomcat

    说一说JVM双亲委派机制与Tomcat https://www.cnblogs.com/dengchengchao/p/11844022.html 讲个故事: 以前,爱捣鼓的小明突然灵机一动,写出了下 ...

  3. JavaScript进行UTF-8编码与解码

    JavaScript本身可通过charCodeAt方法得到一个字符的Unicode编码,并通过fromCharCode方法将Unicode编码转换成对应字符. 但charCodeAt方法得到的应该是一 ...

  4. springboot项目 配置https

    感谢  https://www.jianshu.com/p/1b7b9e0803c6 帮我解决了问题 生成自签名证书 keytool -genkey -storetype PKCS12 -keysiz ...

  5. THUPC&CTS&APIO2019:Far Away

    流水账~ THUPC nmdwsmduliu! THUPC Day -INF~Day -2 大概就是自己做题和每周两次的考试,lsy和fcw两个外校的来吊打我们qwqqq THUPC Day -1 Z ...

  6. CachedThreadPool

    /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * <p> ...

  7. 使用 SetParent 制作父子窗口的时候,如何设置子窗口的窗口样式以避免抢走父窗口的焦点

    原文:使用 SetParent 制作父子窗口的时候,如何设置子窗口的窗口样式以避免抢走父窗口的焦点 制作传统 Win32 程序以及 Windows Forms 程序的时候,一个用户看起来独立的窗口本就 ...

  8. Windows中的消息与消息队列

    消息 在Windows中,消自由MSG结构体表示 typedef struct tagMSG { HWND hwnd; UINT message; WPARAM wParam; LPARAM lPar ...

  9. element ui改写实现两棵树

    使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="rel ...

  10. Linux 内核/驱动开发总结

    总体来看,需要一个阶段性总结了,因为现在SD卡的调试也进入了卡壳期.大概会出一系列的总结文章,主要涉及的主题在下面列出: 1.开发工具:gcc/gdb/vim/ctags 2.Makefile和KCo ...