文字前的小图标HTML,Font Awesome实现文字链右边加一个箭头图标
在上一篇文章里介绍了用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浏览器的写法 */
.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服务器配置支持该字体,你可以参考这几篇文章来完成配置。
本文实例演示及源码下载
文字前的小图标HTML,Font Awesome实现文字链右边加一个箭头图标相关推荐
- python微信图标制作_30行Python代码来绘制一个微信图标
有一句至理名言说得好"Python除了不会生孩子,什么都能干"(当然这句话还有很多版本,比如MATLAB.Excel......),而今天小编就再次证明一下这个观点--用Pytho ...
- 如何在计算机桌面建立一个软件的快捷图,VB编程:生成EXE图标 (为exe程序在电脑桌面上创建一个快捷图标)...
在实际的VB编程工作中,常常要为自己的程序在桌面生成一个快捷图标. 用VB在桌面生成图标我提供两种方式,这两种方法都还很简单. 第一种方法,利用vb5stkit.dll来生成桌面图标: 1.利用现成的 ...
- html在搜索栏中加入放大镜,Win10 Cortana小娜搜索框如何添加放大镜、箭头图标
win10系统自带了语音助手小娜,不过很多新手都表示不懂得该怎样使用.今天,系统城小编要为大家介绍一个给Cortana搜索框添加放大镜和箭头图标的技巧,也就是当你在搜索框中输入字词时,会在搜索框左侧显 ...
- 前端如何设置浏览器网页标签页前的小图标favicon.ico
前端如何设置浏览器网页标签页前的小图标favicon.ico 步骤1: 将小图标favicon.ico文件(或者普通的icon小图片)放在项目的public或者static目录下 步骤2: index ...
- html怎么在文字中加小方框,css之列表数据前加上小方框
大致结构: .latestNews .latestNewsTitle 标题1 .latestNewsContent .News 内容1 .News 内容2 css实现效果:使用::before 对内 ...
- Android Studio代码提示前的小图标
Android Studio图标的意思 每次在写代码的时候,一直不知道代码提示前的小图标是什么意思 最近Google了一下,在IntelliJ IDEA 网站看到了Icon的说明 Common Ico ...
- 在html中什么标签可以显示小方块,css列表前的小方块
css列表前的小方块 自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design ...
- 字体图标 icon font
原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小可以自由 ...
- 《Excel 职场手册:260招菜鸟变达人》一第 20 招 怎样在单元格文字前加空白
本节书摘来异步社区<Excel 职场手册:260招菜鸟变达人>一书中的第1章,第20节,作者: 聂春霞 , 佛山小老鼠 责编: 王峰松,更多章节内容可以访问云栖社区"异步社区&q ...
最新文章
- 使用VSCode调试C#控制台程序
- 全球及中国微电网市场规模容量及建设运营模式分析报告2021年版
- odyssey react鉴定_Nike Odyssey React SHLD开箱测评 Nike Odyssey React SHLD实物欣赏
- 面对大规模系统工程,看Facebook如何处理故障排查(一)
- SAP UI5 应用开发教程之三十九 - SAP UI5 应用出现白屏的一些常见错误和分析方法分享
- # CF1572B Xor of 3(构造)
- Android:IntentService的学习
- 2021-08-20 python安装及作图
- JPM Coin 三部曲 (中) - 摩根大通为何青睐 Quorum 区块链
- azure 安全组_具有安全性和设计注意事项的Azure成本跟踪
- 标签空间而不是多个不间断的空格(“nbsp”)?
- ccs安装多版本编译器离线_CCS编译器安装,DSP/BIOS安装
- Mysql优化(出自官方文档) - 第十篇(优化InnoDB表篇)
- ubuntu下arpoison安装
- VS/C#添加chart控件
- 嵌入式(单片机方向)工程师如何做好定位和职业规划
- meaven install提示系统资源不足
- 虚拟拨号服务器名称,怎么设置虚拟拨号服务器
- 深度分析AI新职位丨人工智能训练师是什么?做什么的?发展前景如何?
- ART世界探险(6) - 流程控制指令