一 前提摘要
    有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是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 configparser 读取指定节点内容失败

    # !/user/bin/python # -*- coding: utf-8 -*- import configparser # 生成一个config文件 config = configparser ...

  2. proxy.go 源码阅读

    )     for {         select {         case <-otherSide:             complete <- true            ...

  3. go语言 nsq源码解读三 nsqlookupd源码nsqlookupd.go

    从本节开始,将逐步阅读nsq各模块的代码. 读一份代码,我的思路一般是: 1.了解用法,知道了怎么使用,对理解代码有宏观上有很大帮助. 2.了解各大模块的功能特点,同时再想想,如果让自己来实现这些模块 ...

  4. sprintf、strcpy 及 memcpy 函数区别

    这些函数的区别在于 实现功能 以及 操作对象 不同.strcpy 函数操作的对象是 字符串 ,完成 从 源字符串 到 目的字符串 的 拷贝 功能. sprintf 函数操作的对象 不限于字符串 :虽然 ...

  5. C++11标准中常用到的各种算法汇总.

    在C++11标准中定义了很多算法,这些算法可以让我们很方便的操作各种容器和数组,这里要注意一下,这些算法操作的并非容器,而是迭代器,然后通过迭代器来操作容器中的数据,算法本身并不会关注容器中保存的数据 ...

  6. Spring事务(一) Markdown 版

    事务 事务的特性(ACID) 原子性(Atomicity) 原子性要求事务所包含的全部操作是一个不可分割的整体,这些操作要么全部提交成功,要么只要其中一个操作失败,就全部"成仁" ...

  7. 【爆料】-《南澳大学毕业证书》UniSA一模一样原件

    ☞南澳大学毕业证书[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...

  8. Django 基础二(View和urls)

    上一篇博文已经成功安装了python环境和Django,并且新建了一个空的项目.接下来就可以正式开始进行Django下 的Web开发了.首先进入项目的主目录: cd ./DjangoLearn/hol ...

  9. Uiautomator--出现报错“urllib3.exceptions.ProtocolError:<'Connection aborted.',error<10054,''>>”的解决方式!

    在运行uiautomator时,出现报错"urllib3.exceptions.ProtocolError:<'Connection aborted.',error<10054, ...

  10. shell与export命令

    围绕以下几个问题来学习export命令: 1.什么是export命令? 2.为什么要用export命令? 3.怎么使用export命令? 1.什么是export命令? ♦ 用户登录到Linux系统后, ...