html怎样做删除的图标,bootstrap如何添加删除图标样式?
bootstrap如何添加删除图标样式?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
什么是字体图标?
字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。
获取字体图标
在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
字体图标列表
CSS 规则解释
下面的 CSS 规则构成 glyphicon class。@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。
.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
然后,这里的.glyphicon:empty {
width: 1em;
}
是空的 glyphicon。
这里有 200 个 class,每个 class 针对一个图标。这些 class 的常见格式如下:.glyphicon-keyword:before {
content: "hexvalue";
}
比如,使用的 user 图标,它的 class 如下:.glyphicon-user:before {
content: "\e008";
}
用法
bootstrap添加删除图标样式
如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
下面的实例演示了如何使用字体图标:
删除
删除
删除
结果如下所示:
定制字体颜色
删除
效果图:
更多bootstrap的相关知识,可访问:web前端自学!!
html怎样做删除的图标,bootstrap如何添加删除图标样式?相关推荐
- PyQT5一起学做图书管理系统(6)添加/删除书籍
PyQT5一起学做图书管理系统(6)添加/删除书籍 环境 系统:windows10系统 编辑器:Sublime3 编程语言:python3+pyqt5 前言 本节来实现书籍的添加与删除,还是那句话,记 ...
- android删除界面工具,Android手机添加/删除桌面图标和插件(图文)
基于android系统的手机还是很人性化的,安装容易删除和卸载也不难,朴素的风格下对新手来说刚开始操作还是会有些不适应的. 工具/原料 android手机 方法/步骤 首先还解锁进入手机桌面: 进入桌 ...
- android 删除插件,Android手机如何添加删除桌面图标和插件
基于Android系统的手机还是很人性化的,安装容易删除和卸载也不难,朴素的风格下对新手来说刚开始操作还是会有些不适应的.除可在应用市场上删除应用外,还可利用手机本身来删除图标,下面一起来看看操作方法 ...
- linux删除eth2设备_如何添加删除子网卡eth0:1(linux案例)
这种方法实现了单网卡多IP,我的系统是centos7的,如何添加删除子网卡IP详细请看下面操作例子 添加子网卡IP:ifconfig ens3:1 192.168.0.100/24 ...
- layui 给table里面的添加图标_layui怎么添加icon图标?
layui怎么添加icon图标?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(icon ...
- php网站标签加小图标,phpweb如何添加ico图标
phpweb如何添加ico图标 网站ICO图标对加强用户对自己网站的印象有着不可估量的作用,今天教大家6步轻松添加ICO图标. 第一步.准备工作 在添加之前,我们要先准备好一个有意义或者印象深刻的IC ...
- delphi mysql 删除_Delphi 用SQL语句添加删除修改字段
1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP COLUMN column ...
- java动态删除属性值_JavaBean动态添加删除属性
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 1.cglib BeanGenerator beanGenerator = new BeanGenerator(); beanGenerator.addP ...
- bootstrap框架菜单栏颜色设置_Bootstrap Icons - bootstrap专用的漂亮图标库,可以免费商用...
专门为著名的前端开发 UI 框架 Bootstrap 的组件和文档定制开发的图标库. 介绍 Bootstrap 图标库 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等.Boots ...
最新文章
- Teamviewer连接服务器显示不能够全屏 或 向日葵连接服务器不能够全屏 或 Teamviewer只显示一个640x480的分辨率选项
- linux系统基本使用教程,Linux系统的基本使用入门
- getHibernateTemplate()的find用法大全
- MongoDB独特查询
- Autodesk AutoCAD 2022 产品系列已发布(附下载)
- InfoPath2003 教程
- 外贸常用术语_外贸业务中常用的术语
- 命令行修改windows壁纸
- EOJ 3322 万年历(历史题)
- 从零学习游戏服务器开发(一) 从一款多人联机实时对战游戏开始
- 001 Figuring in C/C++
- java 闭锁_从火箭发场景来学习Java多线程并发闭锁对象
- 01矩阵最大正方形面积、01矩阵最大矩形面积、直方图最大矩形面积
- c语言编程64位,win-tc语言编程软件官方下载
- 还行,OPPO Find X3 Pro评测:卖的是屏幕和这个超广角!
- WireShark导出H265/HEVC码流,使用h265_export.lua插件
- hue 3.1.2 启用kerberose认证
- 政府网站建设,国办发文来规范!《政府网站发展指引》解读
- iSubtitle 3.2.3 视频字幕制作
- golang语言的包依赖管理方式 综述