iconfont-字體圖標

看到支付寶官網，使用不少iconfont-字體圖標。素色，純色，體積小，嘗試使用作個demo，以便往後參考使用

 

 

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

<h1>第一個結構插入實現圖標</h1>
<i class="icon iconfont">&#xe60a;</i>

 

<h1>第三個css class實現圖標</h1>
<i class="iconfont icon-jiaotonglvyou"></i>

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

 

@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot'); /* IE9*/  /*這裏的路徑作了修改對比線上直接下載的*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff') format('woff'), /* chrome, firefox */
url('../font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.icon{
font-size: 42px;
line-height: 100px;
margin: 10px 0;
color:#333;
-webkit-transition: font-size 0.25s ease-out 0s;
-moz-transition: font-size 0.25s ease-out 0s;
transition: font-size 0.25s ease-out 0s;

}
.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;
}

.icon-lvyou:before { content: "\e60a"; }/*這些是做爲經過css樣式 生成的圖標，相比在前面html結構插入，這樣便於修改*/
.icon-jiaotonglvyou:before { content: "\e60b"; }
.icon-lvyoubaoicon:before { content: "\e60b"; }

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

參考網站：http://www.iconfont.cn/

感謝：醬油 993  等羣友

預覽效果：http://files.cnblogs.com/files/leshao/iconfont-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87.rar

和 http://files.cnblogs.com/files/leshao/iconfont%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87demo.rar