在上一篇文章里介绍了用css背景图实现文字链右边加一个箭头图标的方法,本文将介绍用Font Awesome实现文字链右边加一个箭头图标的方法。
Font Awesome是一个图标字体库,包含300多种常见小图标,如小箭头之类的icon,使用起来相当方便,只需引用一个css文件,是现在网页设计师常用的插件之一。对于对Font Awesome还比较陌生的读者,可以看看我写的几篇入门文章,以作了解。
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浏览器的写法 */
.of