下载-阿里巴巴矢量图标

网站链接：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的简单使用的更多相关文章

  1. 玩转HTML5移动页面

    (1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gul ...

  2. 玩转HTML5移动页面(优化篇)

    原文:http://www.grycheng.com/?p=472 承接上文<玩转HTML5移动页面(动效篇)>,上次说的是让页面动起来的一些小技巧.而页面动起来的根基是功能可用的页面,因 ...

  3. Android使用SVG小结

    SVG的全称是Scalable Vector Graphics,叫可缩放矢量图形.它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降.它的优点在于节约空间,使用方便. andr ...

  4. 【转】手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)

    前言 做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个vue的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不 ...

  5. 玩转HTML5移动页面（优化篇）

    标签:h5 页面优化收藏 热门分享 网页设计师必备的 酷站收藏网站 2013年不容错过的app ui素材 40个漂亮的扁平化网页设计欣赏 国内网页设计公司网站欣赏 55套网页设计常用的psd格式UI ...

  6. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  7. 做小图标还用sprite图？你out了！史上最简单易懂iconfont使用教程

    1.什么是iconfont? 说白了就是用图标制作而成的一套字体文件,本质是一个字体文件(扩展名是ttf\woff\svg的文件).它是用来制作网页常用小图标的一种方法.以下是天猫首页使用iconfo ...

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

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

  9. iconfont使用，亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

随机推荐

  1. HTML添加上传图片并进行预览

    使用说明:新建文件,直接复制粘贴,保存文件为html 格式,在浏览器运行即可: 第一种: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tr ...

  2. AC日记——[SCOI2008] 着色方案 bzoj 1079

    1079 思路: dp: 我们如果dp方程为15维,每维记录颜色还有多少种: 不仅tle,mle,它还re: 所以,我们压缩一下dp方程: 方程有6维,第i维记录有多少种颜色还剩下i次: 最后还要记录 ...

  3. React+dva.js+typescript实现百度贴吧移动web端

    个人练习作品,有bug欢迎在github上提:) github地址:https://github.com/axel10/react-tieba 整个项目中实现起来最麻烦的应该算是滚动位置记忆和路由动画 ...

  4. maven坐标

    maven坐标 <dependency> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat ...

  5. ESXI和vSphere的安装配置-实现一台电脑硬件虚拟化为两台

    本篇文章包含以下几个部分: 1EXSI软件和vSphere软件的安装 2在vSphere上安装虚拟系统 3对虚拟系统通过配置实现硬件虚拟化,实现硬件直通 1.EXSI安装 通过网上下载EXSI ISO ...

  6. Codeforces 908D New Year and Arbitrary Arrangement（概率DP，边界条件处理）

    题目链接  Goodbye 2017 Problem D 题意  一个字符串开始,每次有$\frac{pa}{pa+pb}$的概率在后面加一个a,$\frac{pb}{pa+pb}$的概率在后面加一个 ...

  7. bzoj 5346: tree (其实是是某次雅礼集训的题)

    用prufer序列的公式直接dp,O(n^4)的算法简简单单就写出来了23333. 按理说 O(n^4)是需要优化成O(n^3)才能过的,然鹅我也不知道我怎么过了23333 (那就懒得优化了hhhhh ...

  8. iOS禁止多点操作（按钮和Table项）

    1)避免同时点击多个按钮: [btn setExclusiveTouch:YES]; 设置确保当btn点击时,其他按钮不响应: (2)避免同时点击UITableView中多个row -(NSIndex ...

  9. Linux下进行Web服务器压力（并发）测试工具http_load、webbench、ab、Siege、autobench简单使用教程（转）

    一.http_load 程序非常小,解压后也不到100K http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载.但是它不同于大多数压力测试工 具,它可以以一个单一的进程运行,一般 ...

  10. 使用React开发

    阅读目录 React的组件生命周期 JSX 语法 父组件传向子组件 子组件传向父(爷)组件 getDefaultProps && getInitialState 获取真实的DOM节点 ...