iconfont的简单使用

下载-阿里巴巴矢量图标

网站链接：http://www.iconfont.cn/

首页如下：首页-进入图标库--所有图标--搜索/点击你想要的图标--添加购物车

点击购物车（下载）如下图：

点击下载代码--存储即可！

找到存储的位置：

解压--将下图选中的文件存储在新建的文件夹中（命名为icon或者别的名字都行）

引入到你需要用到iconfont的文件中！

=======================================================================

使用（用例代码如下）：

可以通过color和font-size等等属性来改变iconfont图标的大小和颜色及其他性质！

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" href="icon/iconfont.css" />

  <style type="text/css">

   i:nth-child(odd){

    color: red;

    font-size: 100px;

   }

   i:nth-child(even){

    color: blue;

    font-size: 100px;

   }

  </style>

 </head>

 <body>

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

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

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

 　　 <i class="iconfont icon-augmented-reality-"></i>

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

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

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

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

 　　 <i class="iconfont icon-blue-team"></i>

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

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

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

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

 　　 <i class="iconfont icon-combat-power"></i>

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

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

 </body>

 <script src="icon/iconfont.js"></script>

</html>

测试代码-效果图：

-------------------------------------------------------------------------------------------------------------

iconfont的简单使用的更多相关文章

玩转HTML5移动页面
(1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gul ...
玩转HTML5移动页面(优化篇)
原文:http://www.grycheng.com/?p=472 承接上文<玩转HTML5移动页面(动效篇)>,上次说的是让页面动起来的一些小技巧.而页面动起来的根基是功能可用的页面,因 ...
Android使用SVG小结
SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形.它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降.它的优点在于节约空间,使用方便. andr ...
【转】手摸手，带你用vue撸后台系列四(vueAdmin 一个极简的后台基础模板)
前言做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...
玩转HTML5移动页面（优化篇）
标签:h5 页面优化收藏热门分享网页设计师必备的酷站收藏网站 2013年不容错过的app ui素材 40个漂亮的扁平化网页设计欣赏国内网页设计公司网站欣赏 55套网页设计常用的psd格式UI ...
iconfont字体图标的使用方法--超简单!
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...
做小图标还用sprite图？你out了！史上最简单易懂iconfont使用教程
1.什么是iconfont? 说白了就是用图标制作而成的一套字体文件,本质是一个字体文件(扩展名是ttf\woff\svg的文件).它是用来制作网页常用小图标的一种方法.以下是天猫首页使用iconfo ...
iconfont 在项目中的简单使用
font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好,支持 ...
iconfont使用，亲测
iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法一.在线引用图标的制 ...

随机推荐

Python3在Windows安装配置及简单试用
1,安装配置安装版本是Python3.5,我的安装路径是E:\ImProgram\Python35 添加环境变量,将上述路径加入到path中这样cmd打开命令窗口,输入python就能看到调用成功 ...
(1)IIS
1.选择控制面板-程序和功能 2.点击左侧“打开或关闭Windows功能 3.internet信息服务下的文件夹全勾 4.安装完成后,选择管理工具 5.选择IIS管理器 6.显示如下
(13)C#数组
如果需要使用同一类型的多个对象,数组是一种数据结构,它包含同一类型的多个元素一.一维数组 1.数组的声明方法 int [] a; 因为数组是引用类型,引用类型有个特点是:声明变量时不会马上分配一个内 ...
NYOJ16 矩形嵌套【DAG上的DP/LIS】
矩形嵌套时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a<c ...
HttpRunner 接口自动化测试进阶
前面说到了httprunner的安装与简单使用,参见: https://www.cnblogs.com/chengtch/p/8735160.html 这里我们介绍一下通过调试源码的方式来做接口测试: ...
Python的程序结构[1] -> 方法/Method[0] -> 类实例方法、私有方法和抽象方法
类实例方法.私有方法和抽象方法 Python中最常用的就是类实例方法,类似于属性中的类实例属性,同时,也存在与私有属性类似方法,即私有方法,下面介绍这两种常见的方法,以及一种特殊意义的类实例方法 -- ...
LCA【bzoj3364】 [Usaco2004 Feb]Distance Queries 距离咨询
Description 奶牛们拒绝跑马拉松,因为她们悠闲的生活无法承受约翰选择的如此长的赛道．因此约翰决心找一条更合理的赛道,他打算咨询你．此题的地图形式与前两题相同．但读入地图之后,会有K个问题． ...
android如何取消闹铃
取消闹钟: Intent intent = new Intent(context, TestReceiver.class); PendingIntent pi = PendingIntent.getB ...
Map泛型集合-国家中文和英文的键值映射
package collection; import java.util.HashMap; import java.util.Map; public class Test5 { public stat ...
细说JavaScript对象(1)：对象的使用和属性
JavaScript 中的一切都可以视为对象,除了两个特例:null 和 undefined. false.toString(); // 'false' [1, 2, 3].toString(); / ...

iconfont的简单使用

iconfont的简单使用的更多相关文章

随机推荐

热门专题