一 前提摘要
    有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是tabs中图标选中和被选中的颜色问题,如果是新开发的,目前掌握的有两种办法,比如准备两个类型一样颜色不一样的图片,选中时图片隐藏和显示。另一种就是字体图标,在iconfont找到相应的图标,直接应用。但是在原来的基础上进行添加图标,原项目上用的是字体图标的形式,也不知道已存在的图标库,如果重新在iconfont里找太麻烦。前段时间看到svg,突发奇想,可不可以将svg转成字体图标,于是上网搜了一下,学习并记录了下来。
 二 步骤流程
    第一步:找ui将psd上的图标转化为单个svg格式的图标,另外自己也可以在psd上弄(这个后续学习)。
    第二步:打开icomoon网站 ( https://icomoon.io) 点击右上角的IconMoon App
                 
    第三步:点击左上角的的Import Icons,将所有的svg格式的文件导入。
 
               
 
     eg:如果svg格式不对的话,导入时会显示空白,如下图
 
             
    第四步:选中想要的svg的文件。

    第五步:点击右下角的Generate Font
           

    第六步:图标对应的名称和编码可以更改,默认的也可以用。
         

    第七步:点击右下角的Download。
          

    第八步:解压,之后将style.css移到font文件夹中去,并且修改路径
       

  ps:fonts文件夹中有好几个类型的文件,代表的是不同浏览器的支持。

         IE浏览器:EOT
         Mozilla浏览器:OTF,TTF
         Safari浏览器:OTF,TTF,SVG
         Opera:OTF,TTF,SVG
         Chrome浏览器:TTF,SVG
    第九步:为了避免和原有的图标造成冲突,我们把这个font文件夹重命名为iconfont。放到vue项目中的assets中。
                
    第十步:在app.vue中css导入这个style.css。
            
    第十一步:通过style.css在vue文件中可以添加这个类名来调用这个字体图标了。
           
    eg:字体图标就相当与字体一样,可以为其添加颜色。
    第十二步:成功!
    
  三 总结
  这个是在vue项目上添加的,可以在其他项目上这样运用。字体图标,灵活可变,项目中尽量能用就用这个,既能像字体一样使用,又能svg样放大缩小不失真。
 

将svg文件化成字体图标的步骤的更多相关文章

  1. 使用icomoon把svg图片生成字体图标

    今天看了使用icomoon来将svg转换成图标字体,本来是不会使用别人给的svg,也不清楚具体的好处是什么,查了svg以后,越来越懵,svg挺好的为什么要转成图标字体呢. 一.SVG介绍 SVG 是一 ...

  2. [微信小程序]字体文件,字体图标(.ttf,.woff,woff2)等无法显示问题

    一. 背景 项目引用了第三方UI框架Vant-weapp,但是前几天Vant的cdn被运营商封禁,导致van-icon无法使用. 有赞官方在Github上给出了在小程序app.wxss上添加以下代码的 ...

  3. 详解使用icomoon生成字体图标的方法并应用

    原文:http://blog.csdn.net/u013938465/article/details/50680468 最近项目大量用到字体图标,大家也知道,字体图标任意缩放不会失真,也大大减少请求数 ...

  4. svg图片转换为WEB字体图标

    今天我学会了使用字体制作网站   icomoon.io 制作web文本图标.跟我一起学习吧! (1)字体制作网站   icomoon.io   点击 icomoon APP  --->  imp ...

  5. 字体图标-把SVG图标转换成所需要的字体图标

    小科普: 想必小伙伴们多少都了解或使用过字体图标,总体来说优点多于缺点,优点如下图: 任意缩放,图标不会失真: 可以改变图标颜色: 可以设置图标阴影: 可以设置透明效果: 主流浏览器都支持: 可以快速 ...

  6. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  7. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  8. Spring Boot使用layui的字体图标时无法正常显示 解决办法

    在html文件使用字体图标并且预览时正常,但是启动工程后显示不正常,浏览器调试界面显示字体文件无法decode: Failed to decode downloaded font: xxxxx 如图所 ...

  9. 如何将svg图标快速转换成字体图标?

    今天遇到一个客户需要我将页面的图标做成字体图标,想想哎可能整的麻烦,不过想想这也是对项目的一个优化 ( 1.字体图标直接用color自由控制颜色:2.整合在一起,减少http请求等     PS:平时 ...

随机推荐

  1. Python logger 没打出行数

    # !/user/bin/python # -*- coding: utf-8 -*- ''' subprocess : 需要在linux平台上测试 shell logging ''' import ...

  2. int i=0;i=i++

    package algorithms.com.guan.javajicu; public class Inc { public static void main(String[] args) { In ...

  3. 「WC 2018」州区划分

    题目大意: 给一个无向图$G(V,E)$满足$|V|<=21$,对于某一种将$G(V,E)$划分为k个的有序集合方案,若每一个子集$G_i(V_i,E_i)$,$E_i=\{(x,y)|x\in ...

  4. bzoj 1426 收集邮票

    f[i]:当前已拥有i种邮票,还需要买的邮票数的期望值. g[i]:当前已拥有i种邮票,还需要的钱的期望值. 每张邮票初始都是1元钱,每买一张邮票,还没购买的邮票每张都涨价1元.  f[i]=1+(n ...

  5. bzoj2120 数颜色 分块

    分块大法好 orz 处理出每个点的前驱和后继位置. 暴力修改,查询就在每个整块里查询pre<l的,暴力跑两边就好了 #include<cstdio> #include<cstr ...

  6. BZOJ_3524_[Poi2014]Couriers_主席树

    BZOJ_3524_[Poi2014]Couriers_主席树 题意:给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r- ...

  7. Charles模拟网络请求页面的网络超时测试

    正常情况下网络连接超时可能的原因有以下几点: 1.网络断开,手动的关掉了网络的连接 2.网络阻塞,导致你不能在程序默认等待时间内得到回复数据包. 3.网络不稳定,网络无法完整传送服务器信息. 4.系统 ...

  8. typeof和instansof的区别

    typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.(typeof 运算符返回一个用来表示表达式的数据类型的字符串. ...

  9. 深度学习之循环神经网络(RNN)

    循环神经网络(Recurrent Neural Network,RNN)是一类具有短期记忆能力的神经网络,适合用于处理视频.语音.文本等与时序相关的问题.在循环神经网络中,神经元不但可以接收其他神经元 ...

  10. 我是庖丁,<肢解IOT平台>之物模型

    前言 物模型是对设备在云端的功能描述,包括设备的属性,数据,服务和事件. 物联网平台通过定义一种物的描述语言来描述物模型,称之为 TSL(即 Thing Specification Language) ...