美文网首页
学习Bootstrap3组件之字体图标

学习Bootstrap3组件之字体图标

作者: ldhonline | 来源:发表于2018-09-22 00:05 被阅读0次

共 263 个图标可用
在使用上,我们可以把字体图标看做一个正常的字符,或者看做一个同大小的表情图片。
大多数时候做为按钮、菜单、消息、输入框的附加提示。

  • 总是使用 空的span 为负载dom
  • glyphicon 为基础类, glyphicon-xxx 为图形选择类。
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
  • 常常放在 button.btn 里面,使用一个单图标按钮。
  • 或者放在一段文本前面,做对话框的情境图标。
  • 可以配合表单控件的 has-feedback, form-control-feedback 来给输入框添加右侧图标。
image.png
  • 图标大小与颜色和父类有关系,不用单独设置。
  • 图标在和中文配合时,有可能位置偏上,而且所有的图标宽度可能有细微差别,为了统一视觉可以添加一个自定义hack样式。
    .fa-fix .glyphicon{
      width: 1.4rem;
      font-size: 1.4rem;
      text-align: center;
      top: 2px;
      position: relative;
    }

相关文章

  • 学习Bootstrap3组件之字体图标

    共 263 个图标可用在使用上,我们可以把字体图标看做一个正常的字符,或者看做一个同大小的表情图片。大多数时候做为...

  • bootstrap教程整理-组件2/3

    一、字体图标 注意:想要使用字体图标,我们之前引用js和css所在文件夹一定要有fonts组件 想要使用字体图标,...

  • Bootstrap布局组件——字体图标

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。字体图标用于显示...

  • 字体图标

    9字体图标 1. 字体图标优点 2. 字体图标使用流程 总体来说,字体图标按照如下流程: 3. 设计字体图标...

  • Ionic 3 自定义 tabs 菜单图标

    ionic 的 tabs 组件默认图标更换方式可以通过自定义图标样式来替换。自定义图标可以是图标字体库,也可以是p...

  • 工作笔记三

    react-native 使用图标字体: 使用react-native-elements组件(需要先安装react...

  • 【Appetite】ionic3实录(三)修改自定义图标

    常见图标有图像图标和字体图标两种,在移动端,字体图标对比图像图标有不少优点,所以一般采用字体图标为主。而字体图标的...

  • 手把手教你使用字体图标

    常用字体图标库 阿里字体图标库 iconfont fontawesome 字体图标库 首先使用阿里的字体图标库上个...

  • Bootstrap 布局组件

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。虽然,Glyph...

  • 01-字体图标配置和使用

    一、什么叫做字体图标? 可以像使用字体一样使用图标 一般辨别是否是字体图标主要是看图标是否是纯色 二、字体图标有那...

网友评论

      本文标题:学习Bootstrap3组件之字体图标

      本文链接:https://www.haomeiwen.com/subject/jtctoftx.html