字形图标

字形 不同的图标设计元素

字形

可用字形

包括来自 Glyphicon Halflings 集的 260 个字体格式的字形。 字形 半身人通常不是免费的，但它们的创建者已将它们免费提供给 Bootstrap。作为感谢，我们只要求您提供返回链接 字形 只要有可能。

  • glyphicon glyphicon-星号
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-欧元
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-减号
  • glyphicon glyphicon-云
  • glyphicon glyphicon 信封
  • glyphicon glyphicon-铅笔
  • glyphicon glyphicon-玻璃
  • glyphicon glyphicon-音乐
  • glyphicon glyphicon 搜索
  • glyphicon glyphicon-心
  • glyphicon glyphicon-星
  • glyphicon glyphicon-星-空
  • glyphicon glyphicon 用户
  • glyphicon glyphicon-薄膜
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-列表
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-删除
  • glyphicon glyphicon-放大
  • glyphicon glyphicon 缩小
  • glyphicon glyphicon 关闭
  • glyphicon glyphicon-信号
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-垃圾
  • glyphicon glyphicon-主页
  • glyphicon glyphicon 文件
  • glyphicon glyphicon-时间
  • glyphicon glyphicon-路
  • glyphicon glyphicon-下载-alt
  • glyphicon glyphicon-下载
  • glyphicon glyphicon 上传
  • glyphicon glyphicon 收件箱
  • glyphicon glyphicon-游戏圈
  • glyphicon glyphicon-重复
  • glyphicon glyphicon 刷新
  • glyphicon glyphicon-列表-alt
  • glyphicon glyphicon 锁
  • glyphicon glyphicon 标志
  • glyphicon glyphicon-耳机
  • glyphicon glyphicon-音量关闭
  • glyphicon glyphicon-音量减小
  • glyphicon glyphicon 音量增大
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon 条形码
  • glyphicon glyphicon 标签
  • glyphicon glyphicon-标签
  • glyphicon glyphicon-书
  • glyphicon glyphicon-书签
  • glyphicon glyphicon 打印
  • glyphicon glyphicon 相机
  • glyphicon glyphicon 字体
  • glyphicon glyphicon-粗体
  • glyphicon glyphicon 斜体
  • glyphicon glyphicon 文本高度
  • glyphicon glyphicon 文本宽度
  • glyphicon glyphicon-左对齐
  • glyphicon glyphicon 对齐中心
  • glyphicon glyphicon-右对齐
  • glyphicon glyphicon 对齐对齐
  • glyphicon glyphicon 列表
  • glyphicon glyphicon 左缩进
  • glyphicon glyphicon 右缩进
  • glyphicon glyphicon-facetime-视频
  • glyphicon glyphicon-图片
  • glyphicon glyphicon 地图标记
  • glyphicon glyphicon 调整
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-编辑
  • glyphicon glyphicon-share
  • glyphicon glyphicon 检查
  • glyphicon glyphicon 移动
  • glyphicon glyphicon 后退一步
  • glyphicon glyphicon-快退
  • glyphicon glyphicon-向后
  • glyphicon glyphicon-播放
  • glyphicon glyphicon 暂停
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-快进
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon 弹出
  • glyphicon glyphicon-chevron-左
  • glyphicon glyphicon-chevron-右
  • glyphicon glyphicon 加号
  • glyphicon glyphicon 减号
  • glyphicon glyphicon 删除标志
  • glyphicon glyphicon-ok-标志
  • glyphicon glyphicon-问题标志
  • glyphicon glyphicon-信息标志
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon 删除圆
  • glyphicon glyphicon-ok-圆
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-箭头-左
  • glyphicon glyphicon-箭头-右
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-箭头向下
  • glyphicon glyphicon-共享-alt
  • glyphicon glyphicon-调整大小-full
  • glyphicon glyphicon-调整大小-小
  • glyphicon glyphicon-感叹号-符号
  • glyphicon glyphicon-礼物
  • glyphicon glyphicon 叶
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-睁眼
  • glyphicon glyphicon-闭眼
  • glyphicon glyphicon 警告标志
  • glyphicon glyphicon 平面
  • glyphicon glyphicon-日历
  • glyphicon glyphicon-随机
  • glyphicon glyphicon-评论
  • glyphicon glyphicon-磁铁
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon 转发
  • glyphicon glyphicon 购物车
  • glyphicon glyphicon-文件夹-关闭
  • glyphicon glyphicon-文件夹-打开
  • glyphicon glyphicon-调整垂直大小
  • glyphicon glyphicon-水平调整大小
  • glyphicon glyphicon-HDD
  • glyphicon glyphicon-扩音器
  • glyphicon glyphicon-钟
  • glyphicon glyphicon-证书
  • glyphicon glyphicon-竖起大拇指
  • glyphicon glyphicon-拇指向下
  • glyphicon glyphicon-右手
  • glyphicon glyphicon-左手
  • glyphicon glyphicon 举起手来
  • glyphicon glyphicon 手下
  • glyphicon glyphicon-圆-箭头-右
  • glyphicon glyphicon-圆-箭头-左
  • glyphicon glyphicon-圆-箭头
  • glyphicon glyphicon-圆-箭头向下
  • glyphicon glyphicon-globe
  • glyphicon glyphicon 扳手
  • glyphicon glyphicon-任务
  • glyphicon glyphicon-过滤器
  • glyphicon glyphicon-公文包
  • glyphicon glyphicon-全屏
  • glyphicon glyphicon 仪表板
  • glyphicon glyphicon 回形针
  • glyphicon glyphicon-心空
  • glyphicon glyphicon-链接
  • glyphicon glyphicon-电话
  • glyphicon glyphicon 图钉
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon 排序
  • glyphicon glyphicon 按字母排序
  • glyphicon glyphicon 按字母 alt 排序
  • glyphicon glyphicon 按顺序排序
  • glyphicon glyphicon-按顺序排序-alt
  • glyphicon glyphicon 按属性排序
  • glyphicon glyphicon 按属性 alt 排序
  • glyphicon glyphicon-未选中
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-向下折叠
  • glyphicon glyphicon-折叠
  • glyphicon glyphicon-登录
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-注销
  • glyphicon glyphicon-新窗口
  • glyphicon glyphicon-记录
  • glyphicon glyphicon-保存
  • glyphicon glyphicon-open
  • glyphicon glyphicon 已保存
  • glyphicon glyphicon-导入
  • glyphicon glyphicon 导出
  • glyphicon glyphicon 发送
  • glyphicon glyphicon 软盘
  • glyphicon glyphicon-软盘保存
  • glyphicon glyphicon-软盘-删除
  • glyphicon glyphicon-软盘-保存
  • glyphicon glyphicon-软盘-打开
  • glyphicon glyphicon-信用卡
  • glyphicon glyphicon 传输
  • glyphicon glyphicon 餐具
  • glyphicon glyphicon 标头
  • glyphicon glyphicon 压缩
  • glyphicon glyphicon 耳机
  • glyphicon glyphicon-电话-alt
  • glyphicon glyphicon-塔
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-视频
  • glyphicon glyphicon-高清视频
  • glyphicon glyphicon-字幕
  • glyphicon glyphicon-声音-立体声
  • glyphicon glyphicon-声音-杜比
  • glyphicon glyphicon-声音-5-1
  • glyphicon glyphicon-声音-6-1
  • glyphicon glyphicon-声音-7-1
  • glyphicon glyphicon-版权标记
  • glyphicon glyphicon-注册标记
  • glyphicon glyphicon-云-下载
  • glyphicon glyphicon-云上传
  • glyphicon glyphicon-树-针叶树
  • glyphicon glyphicon-树-落叶
  • glyphicon glyphicon-cd
  • glyphicon glyphicon 保存文件
  • glyphicon glyphicon-打开文件
  • glyphicon 字形升级
  • glyphicon glyphicon 复制
  • glyphicon glyphicon 粘贴
  • glyphicon glyphicon-警报
  • glyphicon glyphicon 均衡器
  • glyphicon glyphicon-king
  • glyphicon glyphicon 女王
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-主教
  • glyphicon glyphicon-骑士
  • glyphicon glyphicon-婴儿配方奶粉
  • 字形图标字形内容
  • glyphicon glyphicon-黑板
  • glyphicon glyphicon-床
  • glyphicon glyphicon-苹果
  • glyphicon 字形擦除酶
  • glyphicon glyphicon-沙漏
  • glyphicon glyphicon-灯
  • glyphicon glyphicon-重复
  • glyphicon glyphicon-存钱罐
  • glyphicon glyphicon 剪刀
  • glyphicon glyphicon-比特币
  • glyphicon glyphicon-日元
  • glyphicon glyphicon-卢布
  • glyphicon glyphicon 规模
  • glyphicon glyphicon-冰棒
  • glyphicon glyphicon-冰棒味
  • glyphicon glyphicon-教育
  • glyphicon glyphicon-选项-水平
  • glyphicon glyphicon-选项-垂直
  • glyphicon glyphicon-菜单-汉堡
  • glyphicon glyphicon-模态窗口
  • glyphicon glyphicon-油
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-太阳镜
  • glyphicon glyphicon 文本大小
  • glyphicon glyphicon-文本颜色
  • glyphicon glyphicon-文本-背景
  • glyphicon glyphicon-对象-对齐-顶部
  • glyphicon glyphicon-对象-对齐-底部
  • glyphicon glyphicon-对象-水平对齐
  • glyphicon glyphicon-对象-左对齐
  • glyphicon glyphicon-对象-垂直对齐
  • glyphicon glyphicon-对象-右对齐
  • glyphicon glyphicon-三角形-右
  • glyphicon glyphicon-三角形-左
  • glyphicon glyphicon-三角形-底部
  • glyphicon glyphicon 三角形顶部
  • glyphicon glyphicon 控制台
  • glyphicon glyphicon 上标
  • glyphicon glyphicon 下标
  • glyphicon glyphicon-菜单-左侧
  • glyphicon glyphicon-菜单-右侧
  • glyphicon glyphicon-菜单向下
  • glyphicon glyphicon 菜单

如何使用

出于性能原因，所有图标都需要基类和单独的图标类。要使用，请将以下代码放置在任何地方。请务必在图标和文本之间留出空格，以便进行适当的填充。

不要与其他成分混合

图标类不能直接与其他组件组合。它们不应与同一元素上的其他类一起使用。相反，添加一个嵌套 <span> 并将图标类应用到 <span>.

仅适用于空元素

图标类只能用在不包含文本内容且没有子元素的元素上。

更改图标字体位置

Bootstrap 假设图标字体文件位于 ../fonts/ 目录，相对于编译的 CSS 文件。移动或重命名这些字体文件意味着通过以下三种方式之一更新 CSS：

  • 改变 @icon-font-path 和/或 @icon-font-name 源 Less 文件中的变量。
  • 利用 相对 URL 选项 由Less编译器提供。
  • 改变 url() 已编译 CSS 中的路径。

使用最适合您的特定开发设置的任何选项。

无障碍图标

现代版本的辅助技术将宣布 CSS 生成的内容以及特定的 Unicode 字符。为了避免屏幕阅读器中出现意外和混乱的输出（特别是当图标纯粹用于装饰时），我们使用 aria-hidden="true" 属性。

如果您使用图标来传达含义（而不仅仅是作为装饰元素），请确保该含义也传达给辅助技术 - 例如，包含附加内容，在视觉上隐藏在 .sr-only 类。

如果您正在创建没有其他文本的控件（例如 <button> 仅包含一个图标），您应该始终提供替代内容来识别控件的用途，以便辅助技术的用户能够理解。在这种情况下，您可以添加一个 aria-label 控件本身的属性。

复制 
<跨度 类=“glyphicon 字形搜索” 咏叹调隐藏=“真实”></span>

示例

在按钮、工具栏按钮组、导航或前置表单输入中使用它们。

复制
<按钮 类型=“按钮” 类=“btn btn-默认” 咏叹调标签=“左对齐”>
  <跨度 类=“glyphicon glyphicon-左对齐” 咏叹调隐藏=“真实”></span>
</按钮>

<按钮 类型=“按钮” 类=“btn btn-默认 btn-lg”>
  <跨度 类=“glyphicon 字形星” 咏叹调隐藏=“真实”></span> Star
</按钮>

一个图标用于 警报 传达这是一条错误消息，并附加 .sr-only 用于向辅助技术用户传达此提示的文本。

复制 
<div 类=“警报警报-危险” 角色=“警报”>
  <跨度 类=“glyphicon glyphicon-感叹号-标志” 咏叹调隐藏=“真实”></span>
  <跨度 类=“仅 SR”>Error:</span>
  Enter a valid email address
</div>