下载-阿里巴巴矢量图标

网站链接：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. SpringBoot无XML配置

    SpringBoot,自己研究了好几天,以前也是没有接触过这类的框架,不过原理吧,也就是那么些个原理,毕竟都是Spring开源下的子框架. 好了,回归正题,今天晚上研究了好久,写出来了无配置文件的ja ...

  2. 【转载】SQL server connection KeepAlive

    1.什么是SQL server TCP连接的keep Alive? 简单说,keep alive 是SQL server在建立每一个TCP 连接的时候,指定了TCP 协议的keepaliveinter ...

  3. laravel 安装碰到的问题：全局安装 Laravel Installer，然后用下面的指令创建新项目： laravel new blog报连接超时解决方案

    在执行laravel new project 的时候报错 cURL error 7: Failed to connect to cabinet.laravel.com port 80: Timed o ...

  4. 四. Java继承和多态8.Java final关键字：阻止继承和多态

    在 Java 中,声明类.变量和方法时,可使用关键字 final 来修饰.final 所修饰的数据具有“终态”的特征,表示“最终的”意思.具体规定如下: final 修饰的类不能被继承. final ...

  5. linux之ssh无密码访问

    1. windows下用putty执行ssh连接vmware中的linux虚拟机 linux虚拟机的网络选择bridge模式,ifconfig 看到ip后与windows local machine之 ...

  6. Vue + Webpack + Vue-loader 系列教程

    http://www.cnblogs.com/terry01/p/5953464.html 介绍 Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成 ...

  7. Springboot集成BeanValidation扩展一：错误提示信息加公共模板

    Bean Validator扩展 1.需求 ​ 在使用validator时,有个需求就是公用错误提示信息,什么意思? 举个例子: ​ @NotEmpty非空判断,在资源文件中我不想每个非空判断都写”不 ...

  8. etcd：从应用场景到实现原理的全方位解读

    随着CoreOS和Kubernetes等项目在开源社区日益火热,它们项目中都用到的etcd组件作为一个高可用强一致性的服务发现存储仓库,渐 渐为开发人员所关注.在云计算时代,如何让服务快速透明地接入到 ...

  9. THINKPHP nginx设置路由为PATHINFO模式

    首先THINKPHP配置文件中设置 //url访问模式为rewrite模式 'URL_MODEL'=>'2', 然后再在nginx.conf文件中,找到这一条语句 #access_log log ...

  10. iOS常用第三方库大全，史上最全第三方库收集

    下拉刷新 EGOTableViewPullRefresh – 最早的下拉刷新控件. SVPullToRefresh – 下拉刷新控件. MJRefresh – 仅需一行代码就可以为UITableVie ...