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

首页 / 图解小知识 | 2022-08-24 16:08:29 点击:0

bootstrap fontAwesome

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

1、引入核心CSS样式文件

  1.  

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

2、HTML结构

  1. 表格 

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

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代码:

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

CSS代码:

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

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


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

评论(0)
*评论只允许汉字和全角中文标点符号。 ? ! ,等
相关标签

推荐相关
相关图片
图集标签

标签索引

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

文章索引

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

关注用户
QQ皮肤 | 唯美图片 | 闪图 | 女生头像 | 女生图片 | 文字图片 | 爱情图片 | 素材图片 | 非主流图片 | 伤感图片 | 游戏图片 | QQ表情 | 流光字 | qq相册封面拼图 | 小清新图片 | lomo图片 | 美女 | 搞笑图片 | 美文 | 卡通图片 | 原创投稿 | 植物图片 | 动物图片 | 风景图片 | 二次元 | 古风图片 | 美食图片 | 手工制作 | 动漫图片 | 手工折纸 | 废物利用 | 儿童手工 | 可爱图片 | 插画 | 欧美图片 | 头像 | 男生头像 | 情侣头像 | 欧美头像 | 卡通头像 | qq说说 | 伤感说说 | 爱情说说 | 搞笑说说 | 心情说说 | 经典说说 | 图片说说 | 纹身图案 | 可爱头像 | 娱乐圈 | 明星图片 | 娱乐八卦 | 影视剧照 | 摄影图片 | 儿童图片 | 女孩图片 | 男孩图片 | 宝宝图片 | cosplay图片 | 图解小知识 | 美女写真 | 性感美女 | 美女校花 | 游戏美女 | 韩国美女 | 清纯美女 | 内衣美女 | 制服美女 | **** | 欧美美女 | 美女模特 | 美女私房 | 电脑壁纸 | 影视壁纸 | 明星壁纸 | 美女壁纸 | 节日壁纸 | 游戏壁纸 | 卡通动漫 | 美食壁纸 | 风景壁纸 | 动物壁纸 | 设计创意 | 汽车壁纸 | 日历壁纸 | 植物壁纸 | 广告壁纸 | 家居壁纸 | 军事壁纸 | 体育壁纸 | 风格壁纸 | 手机壁纸 | 动漫 | 美女 | 明星 | 游戏 | 影视 | 汽车 | 风景 | 唯美 | 植物 | 动物 | 可爱 | 节日 | 卡通 | 创意 | 非主流 | 苹果 | 搞笑 | 爱情 | 动态 | 风格 | 体育 | 美食 | 萌表情 | 文案 范文 曲谱大全 | 美声曲谱 | 合唱曲谱 | 少儿曲谱 | 外国曲谱 | 戏曲曲谱 | 民歌曲谱 | 通俗曲谱 | 器乐乐谱 | 原创曲谱 | 谱友园地 | 个人曲谱 | 吉他乐谱 | 电子琴谱 | 钢琴乐谱 | 胡琴乐谱 | 葫芦丝等 | 琵琶乐谱 | 其他乐谱 | 笛箫乐谱 | 古筝古琴 | 铜管乐谱 | 提琴乐谱 | 长笛乐谱 | 手风琴谱 | 萨克斯谱 | 口琴乐谱 | 扬琴乐谱 | 图说养生 | 运动养生 | 春季养生 | 女性健康 | 夏季养生 | 疾病预防 | 秋季养生 | 养生小妙招 | 减肥瘦身 | 冬季养生 | 母婴保健 | 24节气养生 | 生活常识 | 孕妇养生 | 小偏方 | 幼儿养生 | 美容护肤 | 老人养生 | 中医养生 | 饮食指南 | 青少年养生 | 饮食指南 | 女性养生 | 男性养生 | 白领养生 | 男性健康 | 两性保健 | 生活禁忌 | 穴位养生 | 两性健康 | 风景头像 | 心理健康 | 养生资讯 | 评测 | 图说花草 | 养花知识 | 花卉诊疗 | 植物百科 | 图说娱乐 | 明星 | 影视 | 综艺 | 八卦 | 爆料 | 花边 | 趣事 | 日韩 | 剧情 | 图说女性 | 时尚美妆 | 整容知识 | 丰胸** | 美体知识 | 时尚穿搭 | 化妆技巧 | 发型设计 | 护肤知识 | 美**选 | 保养技巧 | 时尚包包 | 女士内衣 | 运动健身 | 图说社会 | 旅游 | 百态 | 创业 | 职场 | 军事 | 情感 | 健康 | 美食 | 问答 | 图说知识 | 生活 | 资讯 | 影视 | 女性 | 旅游 | 汽车 | 吃喝 | 科技 | 教学 | 食谱 | 特产 | 功效与作用 | 美食 | | 烘焙 | 手机数码 | win7 | word | Excel | 电脑操作 | Photoshop | win10 | PowerPoint | 数码 | 教育 | 手抄报 | 简笔画 | 简笔画大全 | 故事 | 折纸 | 节日节气 | 历史 | 优品 | 家居知识 | 家居 | 母婴 | 星座 | 街拍 | 图说排名 | 生活 | 旅游 | 娱乐 | 城市 | ** | 教育 | 科技 | 行业 | 军事 | 人物 | 体育 | 图说亲子 | 备孕 | 孕期 | 分娩 | 产后 | 新生儿 | 幼儿 | 婴儿 | 早教 | 儿童 | 用品 | 图说发型 | 女生 | 波波头 | 丸子头 | 花苞头 | 男生 | 编发 | 长发 | 圆脸 | 大脸 | 马尾辫 | 蜈蚣辫 | 麻花辫 | 梨花头 | 盘发 | 卷发 | 直发 | 短发 | 刘海 | 非主流 | 夏季 | 发髻 | 纹理烫 | 荷叶头 | 韩式 | 胖脸 | 娃娃脸 | 瓜子脸 | 长脸 | 方脸 | 欧美头像 | 个性头像 | 唯美头像 | 文字头像 | 带字头像 | 伤感头像 | 黑白头像 | 霸气头像 | 超拽头像 | 颓废头像 | 清新头像 | 意境头像 | 背影头像 | 抽烟头像 | 搞笑头像 | 小孩头像 | 游戏头像 | 动物头像 | 汽车头像 | 超萌头像 | 创意头像 | 静物头像 | 非主流头 | 星座头像 | 植物头像 | 节日头像 | 另类头像 | 手绘头像 | 纹身头像 | 明星头像 | 人物头像 | 建筑头像 | 恐怖头像 | 古风头像 | 励志头像 | 风水头像 | 姓氏头像 | 动态头像 | 群头像 | 家用电器 | 手机数码 | 护肤美妆 | 服装饰品 | 食品特产 | 母婴用品 | 时尚生活 | 探索发现 | 科学探寻 | 未解之谜 | 世界之最 | 历史趣闻 | 宇宙探索 | 猎奇八卦 | 世界十大 | 奇异生物 | 图说理财