标签：
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont
http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new 2015-10-27
第一步引入，第二步定义iconfont样式：
/*第一步：使用font-face声明字体*/ @font-face {font-family: ‘iconfont‘; src: url(‘iconfont.eot‘); /* IE9*/ src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */ url(‘iconfont.woff‘) format(‘woff‘), /* chrome、firefox */ url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url(‘iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */ } /*第二步：定义使用iconfont的样式*/ .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; }
第三步：
<i class="iconfont">3</i>
我换了个写法：（这样可以不用维护烦人的html里面的代码了！——"类似 这样的乱码" ）
<style> .icon1:before{content:"\e600";color:red;} .icon2:before{content:"\e601"} .icon3:before{content:"\e602"} </style> <i class="icon iconfont icon1"></i><br> <i class="icon iconfont icon2"></i><br> <i class="icon iconfont icon3"></i><br>
完全不依赖JavaScript，因此无需担心兼容性。免费。为bootstrap设计，但可以完美兼容其它框架。缺点是有点偏大。
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" /> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> <i class="fa fa-star-o"></i> <hr> <i class="fa fa-chevron-up"></i> <i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-left"></i> <i class="fa fa-chevron-right"></i> <hr> <i class="fa fa-spinner"></i>
略。 要用的时候看文档。http://v3.bootcss.com/components/
<span class="glyphicon glyphicon-cog"></span>
....
标签：
原文地址：http://www.cnblogs.com/qq21270/p/4934692.html
