技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

Font Awesome實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)

作者:admin    時(shí)間:2016-11-25 18:8:18    瀏覽:

在上一篇文章里介紹了用css背景圖實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)的方法，本文將介紹用Font Awesome實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)的方法。

Font Awesome是一個(gè)圖標(biāo)字體庫，包含300多種常見小圖標(biāo)，如小箭頭之類的icon，使用起來相當(dāng)方便，只需引用一個(gè)css文件，是現(xiàn)在網(wǎng)頁設(shè)計(jì)師常用的插件之一。對于對Font Awesome還比較陌生的讀者，可以看看我寫的幾篇入門文章，以作了解。

Font Awesome有哪些圖標(biāo)？Font Awesome包含300多種常見小圖標(biāo)，如小箭頭之類的icon，如下圖所示（只截取部分）。

Font Awesome圖標(biāo)

Font Awesome圖標(biāo)

下面介紹如何用Font Awesome實(shí)現(xiàn)文字鏈右邊加一個(gè)箭頭圖標(biāo)，掌握了此方法，就可以在網(wǎng)頁里輕松使用很多小圖標(biāo)了，返回頂部的小箭頭圖標(biāo)就是一個(gè)很常見的應(yīng)用例子。

案例一

css代碼（本案例使用的Font Awesome版本是4.6.3，只需引用兩個(gè)文件即可）：

@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"; /* 關(guān)鍵代碼，這是一個(gè)超鏈接箭頭圖標(biāo) */
}
/* 針對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實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭</font><br>
      html里使用<a href=#><span class="offsite">select控件</span></a>，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于<a href=#><span class="offsite">select控件</span></a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。
</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實(shí)例_FontAwesome實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭_卡卡網(wǎng) 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"; /* 關(guān)鍵代碼，這是一個(gè)超鏈接箭頭圖標(biāo) */
}
/* 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實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭</font><br>
      html里使用<a href=#><span class="offsite">select控件</span></a>，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于<a href=#><span class="offsite">select控件</span></a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。
</div>
</body>
</html>

execcodegetcode

案例二

在案例一中，我們看到有些不好的地方，就是html代碼需要另外加一個(gè) span 元件，這非常不利于維護(hù)。我們的目標(biāo)應(yīng)該是不需更改html的鏈接代碼，只通過css代碼來實(shí)現(xiàn)超鏈接的樣式效果，以便日后維護(hù)方便。通過研究，本案例二便能完美達(dá)到了要求。

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實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭</font><br>
      html里使用<a href=#>select控件</a>，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于<a href=#>select控件</a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。
</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實(shí)例_FontAwesome實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭_卡卡網(wǎng) 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實(shí)現(xiàn)文字超鏈接右邊加一個(gè)箭頭</font><br>
      html里使用<a href=#>select控件</a>，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于<a href=#>select控件</a>只能更改長度，不能更改高度和顏色等樣式，因此在網(wǎng)頁設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。
  </div>
</body>
</html>

execcodegetcode

特別說明

本文使用的Font Awesome版本是4.6.3，點(diǎn)擊下載。

css代碼中引用的Font Awesome文件是本地引用，需要在你的Web服務(wù)器配置支持該字體，你可以參考這幾篇文章來完成配置。

本文實(shí)例演示及源碼下載

demodownload

標(biāo)簽: FontAwesome  
相關(guān)文章
    x
    • 站長推薦
    /* 左側(cè)顯示文章內(nèi)容目錄 */