记忆盒子

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

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

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

作者:Kaka    时间:2016-11-21 9:22:16    浏览:    评论:0

本文介绍IIS6.0安装配置FontAwesome图标字体运行环境,搭配完环境后可以把FontAwesome的图标字体库文件下载到自己服务器里进行调用,再也不用调用别人的文件了。调用别人的文件存在很多不确定事件,还是使用自己服务器里的文件最放心。

1、打开IIS,打开网站属性,切换到“HTTP 头”标签。

切换到“HTTP 头”标签

切换到“HTTP 头”标签

2、点击“MIME 类型”,然后在弹出窗口点击“新建”按钮。

点击“MIME 类型”

点击“MIME 类型”

3、扩展名输入“.woff2”,MIME 类型输入“application/x-font-woff”,点击“确定”按钮。

添加MIME类型

添加MIME类型

4、添加完毕,无需重启IIS,立即生效。

这时我们就可以把FontAwesome的图标字体库文件下载到服务器进行调用了,如下例所示:

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>FontAwesome实例_文字超链接右边加一个箭头_卡卡网 webkaka.com</title>
<style type="text/css">
@font-face {
font-family:'FontAwesome';
src:url("fontawesome-webfont.woff2") format("woff2"); /* 注意文件路径 */
font-weight:normal;
font-style:normal
}
.entry-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%;
}
.entry-content a {
padding-right:3px;
margin-left:3px;
margin-right:3px;
text-decoration: none;
color: #c30;
font-size:14px;
}
.entry-content a:hover {
color: blue;
}
.offsite:hover:after {
color:#666666
}
.offsite:after {
font-family:FontAwesome;
font-weight:normal;
font-style:normal;

margin:0px 0px 0px 3px;
text-decoration:none;
color:#c7c8c9;
content:"\f08e"
}
</style>
</head>
<body>
<div class="entry-content">
<font style="font-size:16px;font-weight:bold">超链接样式二</font><br>
html里使用<a href=#><span class=offsite>select控件</span></a>,非常容易就能实现下拉菜单的效果。但是由于<a href=#><span class=offsite>select控件</span></a>只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。
</div>
</body>
</html>

运行效果,如图:

FontAwesome实例_文字超链接右边加一个箭头

FontAwesome实例_文字超链接右边加一个箭头

实例使用分析:

1)、本例使用的Font Awesome版本是4.6.3,有一个 .woff2 的文件,低版本(如4.2.0)无此文件,调用时应注意。

2)、上述例子中,css使用的是本地文件 fontawesome-webfont.woff2 ,是的,我们实际上只需调用这一个 woff2 的文件,无需调用官网实例里的6个文件,大大提升了加载速度。

3)、调用 woff2 文件时,需声明 font-family:'FontAwesome';  。

4)、定义超级链接的类 offsite ,箭头图标的css属性是  content:"\f08e" (Font Awesome content代码汇总),且要声明 font-family:FontAwesome;

Font Awesome 4.6.3下载

点击下载

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

IIS7.5安装配置FontAwesome图标字体运行环境

Font Awesome content代码汇总,共246个

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

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: Apache设置浏览器缓存
下一篇: Font Awesome content代码汇总,共246个

发表评论:

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

订阅博客                   QQ交流群(312716741)

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

Search

最新评论及回复

最近留言

网站分类

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

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

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