webfont

icon font 自定义字体

icon font 自定义字体

Font Awesome 官网：http://fortawesome.github.io/Font-Awesome/

style

@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 {
	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;
}

html

<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe60a</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60c</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60d</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60f</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe610</i>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe612</i>
                </li>
             </ul>
        </div>
</body>
</html>


例子:http://hotelzt.qunar.com/kzjh/

问题

firefox和IE9不支持对icon font字体的跨域访问,可以将字体文件放到同域的服务器上或修改服务器配置，详细见这里

/etc/apache2/apache2.conf

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

然后

sudo a2enmod headers
sudo /etc/init.d/apache2 restart