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

bootstrap fontAwesome

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

1、引入核心CSS样式文件

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

2、HTML结构

表格 

说明：Bootstrap里一般通过增加一对标签加class的形式显示图标。此处“icon-table”对应Font Awesome字体代码：0ce

通过浏览器**台查看网页渲染加载后的实际效果

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

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

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

2、CSS中引入Font Awesome字体

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

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

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

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

HTML代码：

 
益享天开
 
HTML+CSS
 
WEB前端开发
 
站长**
 
 

CSS代码：

li:first-child a:before{ 
    font-family:'FontAwesome'; 
    content:"284" "("attr(href)")";/*输出图标+href地址*/ 
    color:red; 
    font-size:18px 
} 
li a:before{ 
    font-family:'FontAwesome'; 
    content:"281"; 
    color:#999; 
    font-size:18px; 
    margin-right:5px 
} 

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

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。