记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

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

作者:Kaka    时间:2016-11-27 10:49:30    浏览:    评论:0

在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>

显示结果如图:

FontAwesome图标

FontAwesome图标

实例下载

 点击下载

注意问题

如果在各浏览器都看不到图标,则很可能是MIME配置文件漏了几行代码,我用的CentOS 6.5默认是不用修改MIME文件的。MIME文件在哪里?怎样修改呢?

首先,找到MIME文件,位置在nginx的安装目录里,conf文件夹下面

MIME文件路径

MIME文件路径

我们可以把 mime.types 这个文件下载到本地进行修改。

打开文件 mime.types ,看看有无 application/font-woff 这行,如果无,则添加上去(加到文件最后一行后面即可)。

修改mime文件

修改mime文件

改为再上传上去覆盖原文件(注:覆盖前请先备份原文件)。

最后,重启nginx,重启命令为 /usr/local/nginx/sbin/nginx -s reload (nginx路径要写对哦),使配置生效。

您可能对以下文章也感兴趣

Font Awesome图标在IE浏览器不显示的解决方法

IIS6.0安装配置FontAwesome图标字体运行环境

IIS7.5安装配置Font Awesome图标字体的方法

Font Awesome content代码汇总,共246个

x

标签: FontAwesome  

※ 网站速度慢?试试网站自动优化工具 ※

上一篇: Font Awesome图标在IE浏览器不显示的解决方法
下一篇: WordPress速度慢?瞬间提速3倍的方法

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粤ICP备14028160号-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.