当前位置：美工之家 > 教程 > html+css教程 > Font Awesome实现文字链右边加一个箭头图标
runslyrunsly html+css教程

Font Awesome实现文字链右边加一个箭头图标

在上一篇文章里介绍了用css背景图实现文字链右边加一个箭头图标的方法，本文将介绍用Font Awesome实现文字链右边加一个箭头图标的方法。

Font Awesome是一个图标字体库，包含300多种常见小图标，如小箭头之类的icon，使用起来相当方便，只需引用一个css文件，是现在网页设计师常用的插件之一。对于对Font Awesome还比较陌生的读者，可以看看我写的几篇入门文章，以作了解。

  • Font Awesome content代码汇总，共246个
  • Font Awesome图标在IE浏览器不显示的解决方法
  • IIS7.5安装配置Font Awesome图标字体的方法
  • IIS6.0安装配置FontAwesome图标字体运行环境

Font Awesome有哪些图标？Font Awesome包含300多种常见小图标，如小箭头之类的icon，如下图所示（只截取部分）。

Font Awesome图标

下面介绍如何用Font Awesome实现文字链右边加一个箭头图标，掌握了此方法，就可以在网页里轻松使用很多小图标了，返回顶部的小箭头图标就是一个很常见的应用例子。

案例一

css代码（本案例使用的Font Awesome版本是4.6.3，只需引用两个文件即可）：

@font-face {
 font-family:‘FontAwesome’; /* 声明字体名称 */
 src:url(“fontawesome-webfont.eot”);  /* 注意文件路径 */
 src:url(“fontawesome-webfont.woff2”) format(“woff2”);  /* 注意文件路径 */
 font-weight:normal;
 font-style:normal
}
.offsite {
font: normal normal normal 14px/1 FontAwesome; /* 字体名称与前面一致 */
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.offsite:hover:after {
 color:#666666
}
.offsite:after {
 font-weight:normal;
 font-style:normal;
 margin:0px 0px 0px 3px;
 text-decoration:none;
 color:#c7c8c9;
 content:”\f08e”; /* 关键代码，这是一个超链接箭头图标 */
}
/* 针对IE浏览器的写法 */
.offsite {
  *zoom:expression(this.runtimeStyle[‘zoom’] = ‘1’,this.innerHTML = this.innerHTML + ‘’);
}

html代码：

<div class=”entry-content”>
      <font style=”font-size:16px;font-weight:bold”>超链接样式-FontAwesome实现文字超链接右边加一个箭头</font><br>
      html里使用<a href=#><span class=”offsite”>select控件</span></a>，非常容易就能实现下拉菜单的效果。但是由于<a href=#><span class=”offsite”>select控件</span></a>只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。
</div>

链接文字需要使用 span 元件并使用css类 offsite 。

完整的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>css实例_FontAwesome实现文字超链接右边加一个箭头_卡卡网 webkaka.com</title>
<style type=”text/css”>
@font-face {
 font-family:‘FontAwesome’; /* 声明字体名称 */
 src:url(“fontawesome-webfont.eot”);  /* 注意文件路径 */
 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;
cursor:pointer;
}
.entry-content a:hover {
color: blue;
}
.offsite {
font: normal normal normal 14px/1 FontAwesome; /* 字体名称与前面一致 */
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.offsite:hover:after {
color:#666666
}
.offsite:after {
 font-weight:normal;
 font-style:normal;
 margin:0px 0px 0px 3px;
 text-decoration:none;
 color:#c7c8c9;
 content:”\f08e”; /* 关键代码，这是一个超链接箭头图标 */
}
/* hack IE浏览器的写法 */
.offsite {
*zoom:expression(this.runtimeStyle[‘zoom’] = ‘1’,this.innerHTML = this.innerHTML + ‘&#xf08e;’);
}
</style>
</head>
<body>
<div class=”entry-content”>
      <font style=”font-size:16px;font-weight:bold”>超链接样式-FontAwesome实现文字超链接右边加一个箭头</font><br>
      html里使用<a href=#><span class=”offsite”>select控件</span></a>，非常容易就能实现下拉菜单的效果。但是由于<a href=#><span class=”offsite”>select控件</span></a>只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。
</div>
</body>
</html>

execcodegetcode

案例二

在案例一中，我们看到有些不好的地方，就是html代码需要另外加一个 span 元件，这非常不利于维护。我们的目标应该是不需更改html的链接代码，只通过css代码来实现超链接的样式效果，以便日后维护方便。通过研究，本案例二便能完美达到了要求。

css代码：

@font-face {
 font-family:‘FontAwesome’; /* 声明字体名称 */
 src:url(“fontawesome-webfont.eot”);  /* 注意文件路径 */
 src:url(“fontawesome-webfont.woff2”) format(“woff2”);  /* 注意文件路径 */
 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”
}
/* hack IE浏览器的写法 */
.main-content a {
*zoom:expression(this.runtimeStyle[‘zoom’] = ‘1’,this.innerHTML = this.innerHTML + ‘&#xf08e;’);
}
.main-content a:hover {
 color:blue;
}
.main-content a:hover:after {
 color:blue;
}

html代码：

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

html代码文字链接不用再额外添加 span 元件。

完整的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>css实例_FontAwesome实现文字超链接右边加一个箭头_卡卡网 webkaka.com</title>
<style type=”text/css”>
@font-face {
 font-family:‘FontAwesome’; /* 声明字体名称 */
 src:url(“fontawesome-webfont.eot”);  /* 注意文件路径 */
 src:url(“fontawesome-webfont.woff2”) format(“woff2”);  /* 注意文件路径 */
 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”
}
/* hack IE浏览器的写法 */
.main-content a {
*zoom:expression(this.runtimeStyle[‘zoom’] = ‘1’,this.innerHTML = this.innerHTML + ‘&#xf08e;’);
}
.main-content a:hover {
 color:blue;
}
.main-content a:hover:after {
 color:blue;
}
</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>

execcodegetcode

特别说明

本文使用的Font Awesome版本是4.6.3，点击下载。

css代码中引用的Font Awesome文件是本地引用，需要在你的Web服务器配置支持该字体，你可以参考这几篇文章来完成配置。

  • Font Awesome content代码汇总，共246个
  • Font Awesome图标在IE浏览器不显示的解决方法
  • IIS7.5安装配置Font Awesome图标字体的方法
  • IIS6.0安装配置FontAwesome图标字体运行环境

本文实例演示及源码下载

demodownload

2021服务器优惠

阿里云：2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年 更多...
腾讯云：云产品限时秒杀，爆款1核2G云服务器，首年74元 更多...

runsly

runsly 钻石