前言

有时候找不到刚好合适的字体图标,只好找个差不多的然后再通过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. kafka示例

    1. 引入依赖 <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka-c ...

  2. QPS和并发量

    QPS(q) :每秒处理的请求数量 并发量 (c):同时支持多少个用户在线.与服务器的请求处理模型有关,如果是BIO模型,则并发量就受限于最大能支持多少个线程,如果是NIO模型,则并发量与socket ...

  3. Java基础之(四)HashMap(jdk10)

    JDK1.7以前的HashMap jdk1.7中,当冲突时,在冲突的地址上生成一个链表,将冲突的元素的key,通过equals进行比较,相同即覆盖,不同则添加到链表上,此时如果链表过长,效率就会大大降 ...

  4. [转帖]抢先AMD一步,英特尔推出新处理器,支持LPDDR5!

    抢先AMD一步,英特尔推出新处理器,支持LPDDR5! http://www.eetop.cn/cpu_soc/6946240.html 2019.10 intel的最新技术发展. 近日,知名硬件爆料 ...

  5. laravel使用辅助函数url()引入js和css静态文件

    使用laravel框架时可以将静态文件如,js文件,css文件,放到resources文件夹下的js下,当然也可以放到public文件夹下的js文件夹下,publi文件夹下默认情况下是没有css,js ...

  6. Python进阶:程序界的垃圾分类回收

    垃圾回收是 Python 自带的机制,用于自动释放不会再用到的内存空间: 什么是内存泄漏呢? 内存泄漏,并不是说你的内存出现了信息安全问题,被恶意程序利用了,而是指程序本身没有设计好,导致程序未能释放 ...

  7. 【scratch3.0教程】1.3 了解scratch界面内容

    第3课 了解Scratch界面内容 1.认识Scratch界面 双击桌面快捷方式,启动Scratch程序.我们来认识一下Scratch界面吧! (1)指令区 Scratch程序一共有运动.外观.声音. ...

  8. AS3事件类型

    Event事件类型: ACTIVATE       激活事件 DEACTIVATE 对象休眠事件 ADDED      可视对象添加事件 ADDED_TO_STAGE 可视对象添加到舞台事件 REMO ...

  9. [LOJ#3120][Luogu5401][CTS2019]珍珠(容斥+生成函数)

    https://www.luogu.org/blog/user50971/solution-p5401 #include<cstdio> #include<algorithm> ...

  10. Linux守护进程编写指南

    Linux守护进程编写指南 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种很有用的进 程.Linux的大多数服务器 ...