CSS伪元素:before/:after content 显示Font Awesome字体图标

Bootstrap前端框架中图标都采用Font Awesome字体显示,但是一般都是通过给元素添加class实现的。“益享天开”分享如何在不修改HTML结构的情况下实现图标显示。

Bootstrap框架里显示fontAwesome字体图标的方法

1、引入核心CSS样式文件

  1. <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" type="text/css" /> 

说明:此处CSS文件是通过CDN(内容分发网络)引进的。当然,我们也可以下载相关的CSS、JS文件到本地服务器,具体看项目的部署需要。

2、HTML结构

  1. <a href="javascript:volid(0);"><i class="icon-table"></i>表格</a> 

说明:Bootstrap里一般通过增加一对<i></i>标签加class的形式显示图标。此处“icon-table”对应Font Awesome字体代码:\f0ce

bootstrap矢量图标效果
 
通过浏览器控制台查看网页渲染加载后的实际效果
通过浏览器控制台查看网页渲染加载后的实际效果

通过CSS中添加@font-face属性规则加载Font Awesome字体

1、下载Font Awesome字体包到项目中

Font Awesome中文网:http://fontawesome.com.cn/

2、CSS中引入Font Awesome字体

  1. /*fontAwesome4.5*/ 
  2. @font-face{ 
  3.     font-family:'FontAwesome'
  4.     src:url(../public/fontAwesome4.5/fonts/fontawesome-webfont.eot?v=4.3.0); 
  5.     src:url("../public/fontAwesome4.5/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0"format("embedded-opentype"), 
  6.     url("../public/fontAwesome4.5/fonts/fontawesome-webfont.woff2?v=4.3.0"format("woff2"), 
  7.     url("../public/fontAwesome4.5/fonts/fontawesome-webfont.woff?v=4.3.0"format("woff"), 
  8.     url("../public/fontAwesome4.5/fonts/fontawesome-webfont.ttf?v=4.3.0"format("truetype"), 
  9.     url("../public/fontAwesome4.5/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular"format("svg"); 
  10.     font-weight:normal
  11.     font-style:normal 

说明:@font-face规则属于CSS3技术。@font-face 能够加载服务器端的字体文件,让客户端显示电脑系统中没有安装的字体。目前现代主流的浏览器基本支持.ttf(TrueType)和.otf(OpenType)两种字体作为自定义字体。

3、通过CSS2的:before或:after伪类结合CSS2的content属性引入图标字体编码

通过CSS的content属性设置bootstrap fontawesome图标的截图
通过CSS的content属性设置bootstrap fontawesome图标的截图

HTML代码:

  1. <ul> 
  2. <li><a href="http://www.exp99.com/index.html">益享天开</a></li> 
  3. <li><a href="http://www.exp99.com/htmlcss/">HTML+CSS</a></li> 
  4. <li><a href="http://www.exp99.com/f2e/">WEB前端开发</a></li> 
  5. <li><a href="http://www.exp99.com/news/">站长新闻</a></li> 
  6. </ul> 

CSS代码:

  1. li:first-child a:before{ 
  2.     font-family:'FontAwesome'
  3.     content:"\f284" "("attr(href)")";/*输出图标+href地址*/ 
  4.     color:red
  5.     font-size:18px 
  6. li a:before{ 
  7.     font-family:'FontAwesome'
  8.     content:"\f281"
  9.     color:#999
  10.     font-size:18px
  11.     margin-right:5px 

说明:使用Font Awesome矢量图标可以无限放大,通过设置font-size。

 

 

 

相关经验

导读书签
书签初始化中…