bootstrap里面是否有icon图标呢?
导读：这篇文章给大家介绍了“bootstrap里面是否有icon图标呢?”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“bootstrap里面是否有icon图标呢?”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小...
这篇文章给大家介绍了“bootstrap里面是否有icon图标呢?”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“bootstrap里面是否有icon图标呢?”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。
bootstrap中有icon图标；icon图标是在web项目中使用的图标字体，bootstrap中捆绑了200多种字体格式的icon图标，并且可以通过基于项目的bootstrap来免费使用，其实现原理就是通过“@font-face属性加载了字体。
如何快速入门VUE3.0：进入学习
本教程操作环境：Windows10系统、bootstrap5版、DELL G3电脑
bootstrap中有icon图标
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
Bootstrap 捆绑了 200 多种字体格式的字形
小图标icon是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。
Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体
@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');
}
自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
Bootstrap部分图标如图所示：
到此这篇关于“bootstrap里面是否有icon图标呢?”的文章就介绍到这了，感谢各位的阅读，更多相关bootstrap里面是否有icon图标呢?内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： bootstrap里面是否有icon图标呢?
本文地址： https://pptw.com/jishu/652941.html