先来说说字体图标的好处:
  • 很容易任意地缩放;
  • 很容易地改变颜色;
  • 很容易地产生阴影;
  • 可以拥有透明效果;
  • 一般来说,有先进的浏览器支持;
  • 可以使用CSS来装饰(可以得到CSS很好支持);
  • 可以快速转化形态(做出一些变化,如 :hover等);
  • 可以做出跟图片一样可以做的事情(改变透明度、旋转度,等);
  • 本身体积更小,但携带的信息并没有削减。

  •         现在大多项目中都很热衷于字体图标,对我们项目优化的好处不止一点点,很多时候,我们会先把需要的字体图标制作好再拷贝到项目中使用,这样会带来一个问题,当要增加和删除某些字体图标时,又需要重新制作一遍,这样并不是很方便, 现在阿里的iconfont字体图标库给我们提供了很好的解决方案,本文来简单介绍一下。

    一、创建字体图标项目

              1.首先登录icon字体图标官方网站: http://www.iconfont.cn/ ,在导航栏>图标管理>选择我的项目,并新建一个项目:

            2.挑选我们需要的字体图标,添加到购物车,也可以上传我们自己的字体图标到iconfont,选择好后,直接添加到刚才创建的项目:


        
            3.现在已经拥有了自己的项目,iconfont提供了三种引用方式,这里推荐使用第二种 font class , 使用比较方便,具体区别,在右侧使用帮助中有介绍;

    <link rel="stylesheet" href="http://at.alicdn.com/t/fo********ym9nsc2j2d42t9.css">

    <template>
    <div id="app">
    <img src="./assets/logo.png">

    <i class="iconfont icon-xihuan"></i>
    <router-view/>
    </div>
    </template>


            现在就可以很方便的使用字体图标项目了,直接link 项目提供的外部地址,就可以愉快的开始玩耍了。其实写本文主要的原因,是在vue-cli使用字体图标项目时,发现打包后的字体图标并没有生效,解决办法也很简单,在项目提供的外部链接加上请求方式 "http:" 就可以了。


    使用iconfont管理项目中的字体图标的更多相关文章

    1. AngularCli项目中添加字体图标(Font)详解

      本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...

    2. 如何在移动端app中应用字体图标icon fonts (转)

      原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

    3. 如何在移动端app中应用字体图标icon fonts

      How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

    4. 如何在微信小程序中使用字体图标

      微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

    5. itest 开源测试管理项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码

      导读: 主要从4个方面来阐述,1:背景:2:思路:3:代码实现:4:使用 一:封装背景       像easy ui 之类的纯前端组件,也有下拉列表组件,但是使用的时候,每个下拉列表,要配一个URL ...

    6. 管理项目中的贴图-Texture overview插件

      Texture overview插件管理项目中的贴图 1. Assetstore地址 2. 总览项目中所有贴图 3. 针对不同平台的贴图压缩设置 在插件的右上角 4. 支持多选批量修改 5. 点击表头 ...

    7. iconfont 在项目中的简单使用

      font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好,支持 ...

    8. vue项目中使用iconMoon图标

      前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

    9. 在vue项目中引入阿里图标库小记

      使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

    随机推荐

    1. Makefile详解 (转--不错就是有点长)

      概述 —— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和 professional的程序员,make ...

    2. elasticsearch_初始篇

      一.elasticsearch简单介绍 Elasticsearch 是一个基于Lucene的分布式.可扩展.近实时的搜索与数据分析引擎. 它能从项目一开始就赋予你的数据以搜索.分析和探索的能力. 实时 ...

    3. 小贝_mysql数据库备份与恢复

      mysql数据库备份与恢复 简要:        一.数据库备份        二.数据库恢复 一.数据库备份 1.备份简单说明 : 系统执行中,增量备份与总体备份 例: 每周日总体备份一次,周一到周 ...

    4. Iterator 使用

      Configuration cfg = new Configuration().configure(); SessionFactory factory = cfg.buildSessionFactor ...

    5. 洛谷P3243 [HNOI2015]菜肴制作——拓扑排序

      题目:https://www.luogu.org/problemnew/show/P3243 正向按字典序拓扑排序很容易发现是不对的,因为并不是序号小的一定先做: 但若让序号大的尽可能放在后面,则不会 ...

    6. 2-17 numpy模块使用

      #CURD import numpy as np data1 = np.array([1,2,3,4,5]) print(data1) data2 = np.array([[1,2], [3,4]]) ...

    7. php 和 js之间使用json通信

      有时候我们需要用后台从数据库中得到的数据在js中进行处理,但是当从php中获取到数据的时候,使用的是键值对形式的多维关联数组.而我们知道,js只支持索引数组,不支持关联数组,这个时候从后台传递过来的数 ...

    8. hdu4815 概率问题

      题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4815 好久没写dp了..最开始题意都理解错了, 哎!!我现在很饿也很困!! AC代码: #includ ...

    9. java翻译lua+c+openssl签名项目

      原来项目中用openresty nginx+lua实现server,lua调用c动态链接库,来使用openss做签名,并生成130字节(128签名+2位自定义字节)长度的文件. nginx: loca ...

    10. Codeforces Round #382 (Div. 2) (模拟|数学)

      题目链接: A:Ostap and Grasshopper B:Urbanization C:Tennis Championship D:Taxes 分析:这场第一二题模拟,三四题数学题 A. 直接模 ...