Iconfont——实现字体图标的反转
前言
有时候找不到刚好合适的字体图标,只好找个差不多的然后再通过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——实现字体图标的反转的更多相关文章
- iconfont阿里字体图标的使用方法
我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- Css - 字体图标
Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...
- 如何使用IconFont字体图标代替网页图片?
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...
- iconfont.cn阿里巴巴矢量图下载字体图标实战
1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...
- iconfont字体图标的使用方法--超简单!
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...
- 关于iconfont字体图标的使用
今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
随机推荐
- java笔记--java的语言特性
java的语言特性 1.简单性:例如:java不再支持多继承,而c++是支持多继承的,多继承比较复杂. c++中有指针,java中屏蔽了指针的概念.所以相对来说比较简单. //注:java语言的底层是 ...
- 17.Python略有小成(包,logging模块)
Python(包,logging模块) 一.包 什么是包 官网解释 : 包是一种通过使用'.模块名'来组织python模块名称空间的方式 , 具体来讲 , 包就是一个包含有__ init __.py文 ...
- pandas.DataFrame对象解析
pandas.DataFrame对象类型解析 df = pd.DataFrame([[1,"2",3,4],[5,"6",7,8]],columns=[&quo ...
- git使用代理加快下载
git -c http.proxy=socks5://127.0.0.1:1086 clone https://github.com/.../...
- java实现rabbitMQ消息收发方式
定义:消息队列(MQ)是一种应用程序对应用程序的通信方法是AMQP协议. jar包依赖: <!-- 加入mq消息依赖包 --> <dependency> &l ...
- 自定义 Generate POJOs.groovy
一.Generate文件 import com.intellij.database.model.DasTable import com.intellij.database.model.ObjectKi ...
- “SQL Server does not exist or access denied.”
Have resolved the problem, the Port was different and so the Connection String now reads: <connec ...
- 如何使用NPM?CNPM又是什么?
背景介绍 什么是npm? npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等), NPM是随同NodeJS一起安装的包管理工具 ...
- 版本管理工具Git三种工作流
Git是分布式版本管理控制的工具.学习Git一般都是先去学习Git的命令. 但是学习完Git的基本命令之后还是不知道怎样使用Git.首先,我们要清楚的 一点是Git的使用方法其实有很多种,也就是说Gi ...
- django使用admin站点上传图片
Django有提供文件系统支持,在Admin站点中可以轻松上传图片.使用Admin站点保存图片,需要安装Python的图片操作包 pip install Pillow 1 配置 默认情况下,Dja ...