在上一篇文章里介绍了用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 + ''); } </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 + ''); } .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 + ''); } .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
|