Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求

为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录，并且里面有，不能够缺失

1.字体图标

2.字体图标设置颜色

3.字体图标上加超链

4.在button上使用字体图标

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<span class="glyphicon glyphicon-share-alt"></span><span class="glyphicon glyphicon-share-alt text-success"></span><a href="#">
<span class="glyphicon glyphicon-share-alt"></span>转发
</a><button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-heart"></span>点赞
</button><button class="btn btn-primary btn"><span class="glyphicon glyphicon-heart"></span>点赞
</button>
</body>
</html>

5.所有的字体图标

class 图标
glyphicon glyphicon-asterisk 菊花
glyphicon glyphicon-plus 加号
glyphicon glyphicon-euro 欧元
glyphicon glyphicon-eur 欧元
glyphicon glyphicon-minus 减号
glyphicon glyphicon-cloud 云
glyphicon glyphicon-envelope 信封
glyphicon glyphicon-pencil 铅笔
glyphicon glyphicon-glass 酒杯
glyphicon glyphicon-music 音乐
glyphicon glyphicon-search 搜索
glyphicon glyphicon-heart 心型
glyphicon glyphicon-star 明星
glyphicon glyphicon-star-empty 星空
glyphicon glyphicon-user 用户
glyphicon glyphicon-film 电影
glyphicon glyphicon-th-large 粗颗粒
glyphicon glyphicon-th 细颗粒
glyphicon glyphicon-th-list 列表
glyphicon glyphicon-ok 成功
glyphicon glyphicon-remove 删除
glyphicon glyphicon-zoom-in 放大
glyphicon glyphicon-zoom-out 缩小
glyphicon glyphicon-off 关闭
glyphicon glyphicon-signal 信号
glyphicon glyphicon-cog 设置
glyphicon glyphicon-trash 垃圾箱
glyphicon glyphicon-home 主页
glyphicon glyphicon-file 文件
glyphicon glyphicon-time 时间
glyphicon glyphicon-road 道路
glyphicon glyphicon-download-alt 下载
glyphicon glyphicon-download 下载
glyphicon glyphicon-upload 上传
glyphicon glyphicon-inbox 收件箱
glyphicon glyphicon-play-circle 播放
glyphicon glyphicon-repeat 重复
glyphicon glyphicon-refresh 刷新
glyphicon glyphicon-list-alt 列表
glyphicon glyphicon-lock 锁定
glyphicon glyphicon-flag 旗帜
glyphicon glyphicon-headphones 耳机
glyphicon glyphicon-volume-off 静音
glyphicon glyphicon-volume-down 调低音量
glyphicon glyphicon-volume-up 调高音量
glyphicon glyphicon-qrcode 二维码
glyphicon glyphicon-barcode 条码
glyphicon glyphicon-tag 标签
glyphicon glyphicon-tags 复数标签
glyphicon glyphicon-book 书籍
glyphicon glyphicon-bookmark 书签
glyphicon glyphicon-print 打印
glyphicon glyphicon-camera 相机
glyphicon glyphicon-font 字体
glyphicon glyphicon-bold 粗体
glyphicon glyphicon-italic 斜体
glyphicon glyphicon-text-height 文本高度
glyphicon glyphicon-text-width 文本宽度
glyphicon glyphicon-align-left 左对齐
glyphicon glyphicon-align-center 居中对齐
glyphicon glyphicon-align-right 右对齐
glyphicon glyphicon-align-justify 对齐
glyphicon glyphicon-list 列表
glyphicon glyphicon-indent-left 左缩进
glyphicon glyphicon-indent-right 右缩进
glyphicon glyphicon-facetime-video 视频
glyphicon glyphicon-picture 图片
glyphicon glyphicon-map-marker 地图标记
glyphicon glyphicon-adjust 调整
glyphicon glyphicon-tint 色彩
glyphicon glyphicon-edit 编辑
glyphicon glyphicon-share 分享
glyphicon glyphicon-check 检查
glyphicon glyphicon-move 移动
glyphicon glyphicon-step-backward 单步后退
glyphicon glyphicon-fast-backward 快速后退
glyphicon glyphicon-backward 后退
glyphicon glyphicon-play 播放
glyphicon glyphicon-pause 暂停
glyphicon glyphicon-stop 停止
glyphicon glyphicon-forward 前进
glyphicon glyphicon-fast-forward 快速前进
glyphicon glyphicon-step-forward 单步向前
glyphicon glyphicon-eject 弹出
glyphicon glyphicon-chevron-left 左
glyphicon glyphicon-chevron-right 右
glyphicon glyphicon-plus-sign 增加
glyphicon glyphicon-minus-sign 减少
glyphicon glyphicon-remove-sign 删除
glyphicon glyphicon-ok-sign 确定
glyphicon glyphicon-question-sign 问题
glyphicon glyphicon-info-sign 信息
glyphicon glyphicon-screenshot 截图
glyphicon glyphicon-remove-circle 删除
glyphicon glyphicon-ok-circle 确定
glyphicon glyphicon-ban-circle 禁止
glyphicon glyphicon-arrow-left 左箭头
glyphicon glyphicon-arrow-right 右箭头
glyphicon glyphicon-arrow-up 上箭头
glyphicon glyphicon-arrow-down 下箭头
glyphicon glyphicon-share-alt 分享
glyphicon glyphicon-resize-full 打开
glyphicon glyphicon-resize-small 关闭
glyphicon glyphicon-exclamation-sign 感叹号
glyphicon glyphicon-gift 礼物
glyphicon glyphicon-leaf 树叶
glyphicon glyphicon-fire 火焰
glyphicon glyphicon-eye-open 睁眼
glyphicon glyphicon-eye-close 闭眼
glyphicon glyphicon-warning-sign 警告
glyphicon glyphicon-plane 飞机
glyphicon glyphicon-calendar 日历
glyphicon glyphicon-random 随机播放
glyphicon glyphicon-comment 评论
glyphicon glyphicon-magnet 磁铁
glyphicon glyphicon-chevron-up 上调
glyphicon glyphicon-chevron-down 下调
glyphicon glyphicon-retweet 转发
glyphicon glyphicon-shopping-cart 购物车
glyphicon glyphicon-folder-close 关闭文件夹
glyphicon glyphicon-folder-open 打开文件夹
glyphicon glyphicon-resize-vertical 垂直调整
glyphicon glyphicon-resize-horizontal 水平调整
glyphicon glyphicon-hdd 硬盘
glyphicon glyphicon-bullhorn 扩音器
glyphicon glyphicon-bell 铃铛
glyphicon glyphicon-certificate 证书
glyphicon glyphicon-thumbs-up 赞同
glyphicon glyphicon-thumbs-down 否定
glyphicon glyphicon-hand-right 右手
glyphicon glyphicon-hand-left 左手
glyphicon glyphicon-hand-up 举起手
glyphicon glyphicon-hand-down 放下手
glyphicon glyphicon-circle-arrow-right 右箭头
glyphicon glyphicon-circle-arrow-left 左箭头
glyphicon glyphicon-circle-arrow-up 上箭头
glyphicon glyphicon-circle-arrow-down 下箭头
glyphicon glyphicon-globe 全球
glyphicon glyphicon-wrench 扳手
glyphicon glyphicon-tasks 任务
glyphicon glyphicon-filter 过滤器
glyphicon glyphicon-briefcase 公文包
glyphicon glyphicon-fullscreen 全屏
glyphicon glyphicon-dashboard 仪表板
glyphicon glyphicon-paperclip 回形针
glyphicon glyphicon-heart-empty 空的心型
glyphicon glyphicon-link 链接
glyphicon glyphicon-phone 手机
glyphicon glyphicon-pushpin 图钉
glyphicon glyphicon-usd 美元
glyphicon glyphicon-gbp 英镑
glyphicon glyphicon-sort 排序
glyphicon glyphicon-sort-by-alphabet 字母正序
glyphicon glyphicon-sort-by-alphabet-alt 字母倒序
glyphicon glyphicon-sort-by-order 数字正序
glyphicon glyphicon-sort-by-order-alt 数字倒序
glyphicon glyphicon-sort-by-attributes 属性正序
glyphicon glyphicon-sort-by-attributes-alt 属性倒序
glyphicon glyphicon-unchecked 未选中
glyphicon glyphicon-expand 扩展
glyphicon glyphicon-collapse-down 向下扩展
glyphicon glyphicon-collapse-up 向上扩展
glyphicon glyphicon-log-in 登录
glyphicon glyphicon-flash 闪电
glyphicon glyphicon-log-out 注销
glyphicon glyphicon-new-window 新窗口
glyphicon glyphicon-record 记录
glyphicon glyphicon-save 已保存
glyphicon glyphicon-open 打开
glyphicon glyphicon-saved 保存的
glyphicon glyphicon-import 导入
glyphicon glyphicon-export 导出
glyphicon glyphicon-send 发送
glyphicon glyphicon-floppy-disk 软盘
glyphicon glyphicon-floppy-saved 软盘已保存
glyphicon glyphicon-floppy-remove 软盘删除
glyphicon glyphicon-floppy-save 软盘保存
glyphicon glyphicon-floppy-open 软盘打开
glyphicon glyphicon-credit-card 信用卡
glyphicon glyphicon-transfer 转移
glyphicon glyphicon-cutlery 餐具
glyphicon glyphicon-header 标题
glyphicon glyphicon-compressed 压缩
glyphicon glyphicon-earphone 听筒
glyphicon glyphicon-phone-alt 电话
glyphicon glyphicon-tower 塔
glyphicon glyphicon-stats 统计
glyphicon glyphicon-sd-video 标清视频
glyphicon glyphicon-hd-video 高清视频
glyphicon glyphicon-subtitles 字幕
glyphicon glyphicon-sound-stereo 音响音响
glyphicon glyphicon-sound-dolby 声音杜比
glyphicon glyphicon-sound-5-1 sound-5-1
glyphicon glyphicon-sound-6-1 sound-6-1
glyphicon glyphicon-sound-7-1 sound-7-1
glyphicon glyphicon-copyright-mark 版权标志
glyphicon glyphicon-registration-mark 注册商标
glyphicon glyphicon-cloud-download 云下载
glyphicon glyphicon-cloud-upload 云上传
glyphicon glyphicon-tree-conifer 针叶树
glyphicon glyphicon-tree-deciduous 落叶树
glyphicon glyphicon-cd CD
glyphicon glyphicon-save-file 保存文件
glyphicon glyphicon-open-file 打开文件
glyphicon glyphicon-level-up 水平上升
glyphicon glyphicon-copy 复制
glyphicon glyphicon-paste 粘贴
glyphicon glyphicon-alert 警报
glyphicon glyphicon-equalizer 均衡器
glyphicon glyphicon-king 国王
glyphicon glyphicon-queen 女王
glyphicon glyphicon-pawn 小卒
glyphicon glyphicon-bishop 主教
glyphicon glyphicon-knight 骑士
glyphicon glyphicon-baby-formula 婴儿配方
glyphicon glyphicon-tent 帐篷
glyphicon glyphicon-blackboard 黑板
glyphicon glyphicon-bed 床
glyphicon glyphicon-apple 苹果
glyphicon glyphicon-erase 擦除
glyphicon glyphicon-hourglass 沙漏
glyphicon glyphicon-lamp 灯
glyphicon glyphicon-duplicate 复制
glyphicon glyphicon-piggy-bank 储蓄罐
glyphicon glyphicon-scissors 剪刀
glyphicon glyphicon-bitcoin 比特币
glyphicon glyphicon-btc 比特币
glyphicon glyphicon-xbt 比特币
glyphicon glyphicon-yen 日元
glyphicon glyphicon-jpy 日元
glyphicon glyphicon-ruble 卢布
glyphicon glyphicon-rub 卢布
glyphicon glyphicon-scale 仪表
glyphicon glyphicon-ice-lolly 冰棍
glyphicon glyphicon-ice-lolly-tasted 雪糕口味
glyphicon glyphicon-education 教育
glyphicon glyphicon-option-horizontal 水平
glyphicon glyphicon-option-vertical 垂直
glyphicon glyphicon-menu-hamburger 菜单
glyphicon glyphicon-modal-window 模态窗口
glyphicon glyphicon-oil 油
glyphicon glyphicon-grain 粮食
glyphicon glyphicon-sunglasses 太阳镜
glyphicon glyphicon-text-size 文本大小
glyphicon glyphicon-text-color 文本颜色
glyphicon glyphicon-text-background 文本背景
glyphicon glyphicon-object-align-top 向上对齐
glyphicon glyphicon-object-align-bottom 向下对齐
glyphicon glyphicon-object-align-horizontal 水平对齐
glyphicon glyphicon-object-align-left 左对齐
glyphicon glyphicon-object-align-vertical 垂直对齐
glyphicon glyphicon-object-align-right 右对齐
glyphicon glyphicon-triangle-right 三角右
glyphicon glyphicon-triangle-left 三角左
glyphicon glyphicon-triangle-bottom 三角下
glyphicon glyphicon-triangle-top 三角上
glyphicon glyphicon-console 控制台
glyphicon glyphicon-superscript 上标
glyphicon glyphicon-subscript 下标
glyphicon glyphicon-menu-left 左菜单
glyphicon glyphicon-menu-right 右菜单
glyphicon glyphicon-menu-down 下菜单
glyphicon glyphicon-menu-up 上菜单

Bootstrap字体图标相关推荐

  1. Bootstrap 字体图标 Bootstrap Glyphicon Components

    基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span&g ...

  2. Bootstrap 字体图标Glyphicons

    Bootstrap 提供了一个图片精灵,其中包含 140 个图标,这些图标可用于按钮.链接.导航和表单等元素.这些图标由 Glyphicons(http://glyphicons.com/)提供.如图 ...

  3. Bootstrap 字体图标和自定义矢量图标

    一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...

  4. 解决本地Bootstrap字体图标不可见的问题

    原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...

  5. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  6. Bootstrap 字体图标(Glyphicons)

    本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 什么是字体图标? 字体图标是在 ...

  7. jsp中不能正常显示图片+不能正常显示bootstrap字体图标

    一直以来,bootstrap框架下的轮播图在jsp中不能正式显示,我本以为是配置问题,导致bootstrap和jsp不一样. 话不多说,上图: 前期: 这是一个轮播图,可以看到第一:图片不能显示,我的 ...

  8. Bootstrap 字体图标使用案例

    图标有很多种用途,比如按钮组.按钮.导航.表单输入框中的小图标等.在任何需要的地方,你都可以使用这些图标来设计出漂亮的界面. 1.按钮组 <div class="btn-toolbar ...

  9. html语言中glyphicon,Bootstrap字体图标无法正常显示的解决方法

    bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...

最新文章

  1. 使用C语言和i2c-dev驱动
  2. 深度学习框架TensorFlow(4.Fetch and Feed)
  3. php查看文件属性,文件目录属性及权限
  4. CCNET自动构建之路
  5. 基于RNN和CTC的语音识别模型，探索语境偏移解决之道
  6. Java编程中“为了性能”尽量要做的26点
  7. bzoj 2623 所罗门的咒语
  8. 回文自动机算法+马拉车算法概述及习题【回文串系列问题】
  9. android dns 设置,安卓手机怎么设置DNS Android手机修改DNS图文教程
  10. STM32F103C8T6最小系统原理图和PCB
  11. C#基础知识（停止更新、移步博客园）
  12. NetApp ADP （Advanced drive partitioning） 介绍
  13. 微信公众号网页授权40029错误「建议收藏」
  14. 记在2019，winter is coming
  15. 达内-JavaWeb考试复习
  16. 三角形加几笔能变成什么_一个圆添上几笔能出来什么形状？例如：表，太阳，向日葵.-圆形加几笔得什么事物-数学-伍靖都同学...
  17. 风的UV分量转成风向风速（C#）
  18. L1-039 古风排版-java
  19. 淘宝抓取宝贝买家秀核心代码
  20. 浅尝辄止：数据库--数仓大数据平台--数据中台

热门文章

  1. 幼儿抽象逻辑思维举例_幼教科目二丨幼儿认知的发展（思维）
  2. win7出winsock问题了！~~~~~
  3. 【前端面试必读】w3c标准是什么？
  4. 一份比较实用的Ubuntu下替代WIN软件列表
  5. HTTP服务器响应状态信息
  6. 国内可用的css,js,图标字体,等常用前端公共库CDN服务
  7. 【JMX】-----JMX概述
  8. 数字图像处理——第二章（数字图像基础）
  9. Python常用轮子下载网站
  10. zabbix结合qqmail发送告警信息