前言

有时候找不到刚好合适的字体图标,只好找个差不多的然后再通过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. POJ 1014 Dividing(入门例题一)

    Time Limit: 1000MS Memory Limit: 10000K Total Submissions: Accepted: Description Marsha and Bill own ...

  2. docker安装nginx , 安装mysql5.6,安装redis3.2

    安装nginx 拉取镜像 docker  pull nginx 查看镜像 docker  images 创建多个目录 mkdir -p  /data/nginx/{conf,conf.d,html,l ...

  3. 【转帖】PowerPC架构:IBM的一座金矿

    PowerPC架构:IBM的一座金矿 https://www.eefocus.com/mcu-dsp/365599 <处理器史话>之十五 2016-07-15 14:01 作者:付丽华预计 ...

  4. SpringAOP异常:org.springframework.aop.aspectj.AspectJExpressionPointcut cannot be cast to com.....

    Exception in thread "main" java.lang.ClassCastException: org.springframework.aop.aspectj.A ...

  5. 『Go基础』第6节 注释

    在上一节中, 我们学会了怎样写一个 Hello Go . 但是, 大家有可能还没有明白为什么那么写, 下面我们通过注释来了解一下. 注释的重要性不再过多赘述, 一段不写注释的代码读起来实在难受. 那么 ...

  6. Python 判断字符串是否包含中文

    一.摘要 使用 xlrd 模块打开带中文的excel文件时,会报错. FileNotFoundError: [Errno 2] No such file or directory: 'xx.xlsx' ...

  7. Java 处理异常

    Java中 ,catch块和 finally块中都有可能发生异常,这时候就需要 用throw 抛出异常       类似于 C#里方法体中的 throw:

  8. MySQL的ERROR 1205错误分析

    一.错误发生及原因猜测 1.错误发生 在删除 t_user 表的一条数据时,Navicat 发生长时间的无响应,然后弹出一个对话框,提示:ERROR 1205: Lock wait timeout e ...

  9. 【洛谷 P1659】 [国家集训队]拉拉队排练(manacher)

    题目链接 马拉车+简单膜你 #include <cstdio> #include <cstring> #include <algorithm> using name ...

  10. Flask中jinja2的应用

    Flask中jinja2的应用 # -*- coding: utf-8 -*- # @Time : 2019/9/24 17:29 # @Author : AnWen from flask impor ...