引入字体图标

原文链接： http://www.cnblogs.com/qianduangaoshou/p/6477853.html

字体图标是用于创建例如搜索框放大镜，雪碧图小图标，等小图标，有几个图标库，例如fontello，链接地址：

http://fontello.com/

下载到的图标文件放入和网页项目同一文件夹下，里面的font文件夹下有好几种形式，不同的浏览器支持不同的形式

 

 

  @font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS  chrome */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

.iconfont {
    font-family:"iconfont";
    font-size: 32px;
    font-style: normal;
}
.iconfont:before{
/*利用before属性插入新图标，注意，这里为右斜号
e800为图标代码

*/
    content: '\e800';

}

转载于:https://www.cnblogs.com/qianduangaoshou/p/6477853.html