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 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...
随机推荐
- python笔记-冒泡排序【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python/ 前言 面试的时候经常有面试官喜欢问如何进行冒泡排序?这个问题相信能难倒一 ...
- Fiddler抓包11-HTTPS证书Actions无法导出问题【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 在点Actions时候出现Export Failed:The r ...
- springboot webapi 支持跨域 CORS
1.创建corsConfig 配置文件 @Configuration public class corsConfig { @Autowired varModel varModel_; @Bean pu ...
- 通栏导航栏的制作，综合使用CSS属性，代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...
- Python与数据库[1] -> 数据库接口/DB-API[3] -> ODBC 适配器
ODBC适配器 / ODBC Adaptor ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(WOSA,Windows Open Service ...
- Python的Web编程[0] -> Web客户端[0] -> 统一资源定位符 URL
统一资源定位符 / URL 目录 URL 构成 URL 解析 URL 处理 1 URL构成 统一资源定位符(Uniform Resource Locator) 是对可以从互联网上得到的资源的位置和访问 ...
- Python的扩展接口[1] -> 串口通信
串口通信 / Serial Communication 1 串口简介 / Serial Introduction 串行接口(Serial Interface)简称串口,通常为COM接口,数据发送方式为 ...
- SpringCloud集群(三)
一.构造步骤 1.进行其他的服务中心的域名映射 127.0.0.1 eureka7001.com 127.0.0.1 eureka7002.com 127.0.0.1 eureka7003.com 2 ...
- SpringCloud简介(一)
一.SpringCloud简介 SpringCloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.负载均衡.微代理.事件总线.全局锁.决策竞选.分布式会话等等 ...
- KDtree浅谈
KDtree浅谈 1.对KDtree的理解 首先要知道$KDtree$的用处,$KDtree$是用来进行多维数点的,一般这些点都是在在而二维及二维以上,因为一维上的问题,我们基本都可以运用线段树来解决 ...