文字前的小图标HTML,Font Awesome实现文字链右边加一个箭头图标

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

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

Font Awesome有哪些图标?Font Awesome包含300多种常见小图标,如小箭头之类的icon,如下图所示(只截取部分)。

53a8d4e34cbe243e93a3c311590e065d.gif

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代码:

超链接样式-FontAwesome实现文字超链接右边加一个箭头

html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。

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

完整的html代码:

css实例_FontAwesome实现文字超链接右边加一个箭头_卡卡网 webkaka.com

@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 + '');

}

超链接样式-FontAwesome实现文字超链接右边加一个箭头

html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。

案例二

在案例一中,我们看到有些不好的地方,就是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 + '');}

.main-content a:hover {

color:blue;

}

.main-content a:hover:after {

color:blue;

}

html代码:

超链接样式-FontAwesome实现文字超链接右边加一个箭头

html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。

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

完整的html代码如下:

css实例_FontAwesome实现文字超链接右边加一个箭头_卡卡网 webkaka.com

@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 + '');}

.main-content a:hover {

color:blue;

}

.main-content a:hover:after {

color:blue;

}

超链接样式-FontAwesome实现文字超链接右边加一个箭头

html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。

特别说明

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

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

本文实例演示及源码下载

  • 0
    点赞
  • 1
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值