一、iconfont的使用范围

  在工作当中,经常会用到嵌在元素里的小图标

在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果。但是如果这么做的话,就必须把图片一个个切下来做成精灵图,过于麻烦。而且图标一般都会改变颜色形状,就要求一个图标制作多个状态的图。另外,背景图片还牵扯到background-size的兼容性问题,不容易控制大小和位置。而使用字体图标,完全可以避免这些问题,不仅 可以改变大小,还可以改变颜色。

二、常用字体图标的方式

  1. 阿里巴巴矢量图库( http://www.iconfont.cn/ )
  2. fontello( http://fontello.com/ )
  3. icommoon( http://icomoon.io/app/#/select )
  4. font-awesome( http://fortawesome.github.io/Font-Awesome/ )
  5. glyphicon halflings( http://glyphicons.com/ )

三、阿里图库的使用步骤

  1.打开图库的网址( http://www.iconfont.cn/ )

  2.可以制作也可以搜索找到自己需要的图标,将其加入购物车

  3.打开购物车就可以看到之前找到的图标了,点击下载代码

  4.解压下载的压缩包,就会看到里面有一堆的东西

  5.这个压缩包中其实有三种引入方式,我们打开相应的html文件就可以查看每种引入方式的具体信息

四、三种引入方式的优势和缺陷

  1.font-class引用方式

    a)包含

  

    b)引入

<link rel="stylesheet" type="text/css" href="fontclass/iconfont.css" />

    c)使用

      ** icon-xxx通过看上面的html文件看到

 <i class="iconfont icon-xxx"></i>

    d)特点

      i.兼容:IE8+

      ii.语义明确,书写直观

      iii.使用class定义图标,替换方便

      iv.不支持多色图标

  2.unicode引用方式

    a)包含

    b)引入

 <script type="text/javascript" src=" symbol/iconfont.js" ></script>

**css文件中加入

 .icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

    c)使用

 <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>

    d)特点

    1.   兼容:IE9+
    2.   支持多色图标,不再受单色限制
    3.   支持通过font-/color调整字体样式
    4.   浏览器渲染svg的性能一般

  3.symbol引用方式

    a)包含

    b)引入

** css文件加入

 @font-face {
font-family: 'iconfont';
src: url('unicode/iconfont.eot地址');
src: url('unicode/iconfont.eot地址?#iefix') format('embedded-opentype'),
url('unicode/iconfont.woff地址') format('woff'),
url('unicode/iconfont.ttf地址') format('truetype'),
url('unicode/iconfont.svg地址#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

    c)使用

 <i class="iconfont">&#xxxxx;</i>

    d)特点

  1. 兼容性:IE6+
  2. 支持按字体方式动态调整图标颜色大小
  3. 不支持多色

00字体图标iconfont的制作与使用--阿里矢量图库的更多相关文章

  1. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  2. WPF字体图标——IconFont

    原文:WPF字体图标--IconFont 版权声明:本文为[CSDN博主:松一160]原创文章,未经允许不得转载. https://blog.csdn.net/songyi160/article/de ...

  3. WPF矢量字体图标(iconfont)

    原文:WPF矢量字体图标(iconfont) 转载:点击打开链接 步骤: 一.下载添加iconfont文件 二.添加到资源文件夹,并设置不复制,且为资源文件 三.增加FIcon.xaml文件 < ...

  4. 字体图标iconfont

    字体图标的作用: 1. 可以做出图片一样可以做的事情, 改变透明度, 旋转度,等... 2. 但是本质其实是文字,可以很随意的改变颜色, 产生阴影,透明效果等 3. 本身体积更小,但携带的信息并没有消 ...

  5. UWP 矢量字体图标(iconfont)使用

    本文使用 阿里巴巴开源字体: 选择矢量字体图标: 查看或编辑 Unicode编码 或字体名称 下载到本地,添加到uwp项目 代码中写法 Text:Unicode编码 FontFamily:文件路径#字 ...

  6. react-native中使用自定义的字体图标iconfont

    iconfont图标库下载 可在 http://www.iconfont.cn 下载 下载完成后的目录中有字体文件: iconfont.ttf 拷贝字体文件 Android: 在 Android/ap ...

  7. 微信小程序 使用字体图标 iconfont

    第一步:在阿里巴巴矢量图标库下载需要的图标 地址:https://www.iconfont.cn/ 添加至项目 第二步:打开在线代码 将在线代码复制 第三步:点击下载至本地下载图标 将下载的downl ...

  8. 移动开发基础-学习笔记二-字体图标、less、bootstrap入门

    1.字体图标 1.字体图标都是用svg图片 1.svg图片不失真 2.svg图标由设计师提供 3.为了减少网络请求,会把svg图标转换成字体图标,放到字体文件中,通过字体库的方式使用 2.制作步骤 1 ...

  9. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

随机推荐

  1. linux防火墙(二)—— iptables语法之选项和控制类型

    一.语法: iptables [-t 表名] 选项 [链名] [匹配条件] [-j 控制类型] 未指定表名时,默认用filter表:链名,控制类型要大写:除非设置默认策略,否则必须指定匹配条件:不指定 ...

  2. Python变量类型的强制转换

    当我们需要对数据的类型转换时,只需要将数据类型作为函数名即可. 下面给出的函数可以执行数据类型之间的转换,函数返回一个新的对象,表示转换的值 函数格式 使用示例 描述 int(x [,base]) i ...

  3. P4313 文理分科 最小割

    $ \color{#0066ff}{ 题目描述 }$ 文理分科是一件很纠结的事情!(虽然看到这个题目的人肯定都没有纠结过) 小P所在的班级要进行文理分科.他的班级可以用一个n*m的矩阵进行描述,每个格 ...

  4. JAVA之I/O 输入输出流详解

    简    介 如何在Java中进行文件的读写,Java IO流是必备的知识.这篇博文主要为您带来Java中的输入输出流的内容,包括文件编码.使用File类对文件和目录进行管理.字节流和字符流的基本操作 ...

  5. paraview显示指定时间段的时均图(两种方法)

    方法一: 首先计算以后会得到每个时刻的网格数据,如下图: 但是我们只想要比如最后2s的数据,如果直接导入,paraview会把从0s时刻的数据全部加载,做时均图的时候也就是对整个时间段做时均,不是我们 ...

  6. loj 2038 / 洛谷 P4345 [SHOI2015] 超能粒子炮・改 题解

    好玩的推式子 题目描述 曾经发明了脑洞治疗仪与超能粒子炮的发明家 SHTSC 又公开了他的新发明:超能粒子炮・改--一种可以发射威力更加强大的粒子流的神秘装置. 超能粒子炮・改相比超能粒子炮,在威力上 ...

  7. codeforces833B The Bakery

    题面传送门 题目大意:将一个长度为n的序列分为k段,使得总价值最大,一段区间的价值表示为区间内不同数字的个数 思路: 显然的dp. 先想到一个朴素的状态转移方程 $dp[i][k]=max(dp[j] ...

  8. (POJ - 1050)To the Max 最大连续子矩阵和

    Given a two-dimensional array of positive and negative integers, a sub-rectangle is any contiguous s ...

  9. [转] Emmet-前端开发神器

    [From] https://segmentfault.com/a/1190000007812543 Emmet是一款编辑器插件,支持多种编辑器支持.在前端开发中,Emmet 使用缩写语法快速编写 H ...

  10. 网络那点事之socket队列

    1.socket 在内核中是怎么表示的,怎么与文件系统建立关系 2.socket在什么时候创建了接收队列,接收队列的长度是怎么确定的 3.接收到一个数据包根据怎么找到到接收队列的 使用hash算法,分 ...