Linux Nginx安装配置Font Awesome图标字体【好简单】

在Linux Nginx安装配置Font Awesome图标字体，比在windows iis简单得多，我们甚至不用任何设置，只需把font awesome字体库文件下载到网站目录里就能直接使用了，并且，最重要的是，竟然无需额外的文件和代码，一个代码就能在各种浏览器里运行有效。要知道，iis使用的font awesome字体图标，在IE浏览器是需要单独写一个针对IE的css代码才行的，在chrome有效的css代码在IE里是无效的。

好了，说了那么多，回到主题，我们在Linux Nginx如何安装配置Font Awesome图标字体呢？其实，很简单。

首先，下载font awesome字体库文件，点击下载。

然后，把文件上传到网站根目录，当然你也可以把文件上传到网站任何一个目录里，关键是在网页html代码里写引用文件路径要写正确。

这样我们就可以直接使用了。请参考如下完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
<title>Linux Nginx安装配置Font Awesome图标字体_卡卡网 webkaka.com</title>
<style type="text/css">
@font-face {
font-family:'FontAwesome'; /* 声明字体名称 */
src:url("fonts/fontawesome-webfont.eot"); /* 注意文件路径 */
src:url("fonts/fontawesome-webfont.woff") format("woff"); /* 注意文件路径 */
font-weight:normal;
font-style:normal
}
.main-content{
width:600px;
margin:30px 30px 30px 30px;
font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
font-size:14px;
color:#333;
line-height:185%;
}
.main-content a{
font: normal normal normal 14px/1 FontAwesome; /* 与前面声明的字体名一致 */
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration:none;
color: #c30;
}
.main-content a:after {
font-weight:normal;
font-style:normal;
margin:0px 0px 0px 3px;
text-decoration:none;
color:#c7c8c9;
content:"\f08e"; /* 这是一个超链接箭头图标 */
}
</style>
</head>
<body>
<div class="main-content">
<font style="font-size:16px;font-weight:bold">超链接样式-FontAwesome实现文字超链接右边加一个箭头</font><br>
html里使用<a href=#>select控件</a>，非常容易就能实现下拉菜单的效果。但是由于<a href=#>select控件</a>只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。
</div>
</body>
</html>