Bootstrap教程(12)--使用图标

╰+哭是因爲堅強的太久メ 2022-10-31 04:21 187阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 使用Glyphicon图标
 *  3. 结合按钮使用
 *  4. 小结

# 1. 背景 #

大家都晓得，使用图标后，页面效果肯定是好许多的。

一个简单的按钮，添加图标后，有一种传神的效果。精美的图标是要收费的，你享受人家优秀的成果，就得付出相应的价钱。

有一个相当不错的图标库Glyphicon，老外做的，一般情况下咱们要正儿八经的使用，是要收费的。

但是在Bootstrap框架下，使用Glyphicon图标是免费的，就是这么神奇！

# 2. 使用Glyphicon图标 #

使用Glyphicon图标很简单，为`<span>`标签添加相应的样式类即可，例如搜索图标。

<span class="glyphicon glyphicon-search"></span>

效果如下：  
![在这里插入图片描述][20210221171427108.png_pic_center]  
如果想使用其他图标，可以从此查询[Glyphicon图标查询][Glyphicon]。

# 3. 结合按钮使用 #

图标最常见的使用场景就是结合按钮使用了，可以直接将图标元素放入按钮元素中。示例代码：

<button type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search"></span> 搜索
                    </button>

效果如下：  
![在这里插入图片描述][20210221171744558.png_pic_center]

# 4. 小结 #

Glyphicon提供的图标库还是比较完整全面的，基本够用，需要使用时直接查询下，找到符合需求的样式类然后使用即可。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210221171427108.png_pic_center]: /images/20221024/45784d6fc105472aa5cde9421ba17a5f.png
[Glyphicon]: https://v3.bootcss.com/components/#glyphicons
[20210221171744558.png_pic_center]: /images/20221024/d4a34a72ab6a46c08c71dcb2f8ec2022.png

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap图标

Bootstrap4默认取消了Font Awesome，如果要使用则要我们手动添加。不建议大家下载Font Awesome，而是直接通过CDN加速（http://stat

刺骨的言语ヽ痛彻心扉/ 2023年09月24日 16:58/ 0 赞/ 19 阅读

相关 bootstrap 图标_开源软件丨Bootstrap 官方开源 SVG 图标库 Bootstrap Icons

![2b8858bf277d3152b1c5abbbc4135481.png][] 喜欢就关注我们吧！ Bootstrap 开源了首套 SVG 图标库 Bootstrap

分手后的思念是犯贱/ 2023年01月01日 12:58/ 0 赞/ 386 阅读

相关 Bootstrap教程(12)--使用图标

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 使用Glyphicon图标 3. 结合按钮使用 4

╰+哭是因爲堅強的太久メ/ 2022年10月31日 04:21/ 0 赞/ 188 阅读

相关 Bootstrap 图标

Bootstrap 图标由 Glyphicons 提供。详情可以去bootstrap官网进行查看。用法： <i class="icon_class_name"><

朱雀/ 2022年08月23日 14:00/ 0 赞/ 229 阅读

相关 Bootstrap字体图标

1.若要使用图标，直接引入 //显示一个放大镜的查找图标 <span class="glyphicon glyphicon-search"></span>

怼烎@/ 2022年08月23日 08:15/ 0 赞/ 222 阅读

相关 Bootstrap Glyphicons 图标

可用的图标包括 200 个来自 Glyphicon Halflings 的字体图标。[Glyphicons][] Halflings 一般不允许免费使用，但是他们

清疚/ 2022年08月18日 11:53/ 0 赞/ 171 阅读

相关 Bootstrap-table使用教程

-------------------- 前言我们先从Bootstrap-table（以下简称BS-table）的基础使用开始讲起，写法来说，BS-table主要分为

女爷i/ 2022年05月20日 03:12/ 0 赞/ 228 阅读

相关 Bootstrap教程(一)Glyphicons字体图标使用

一.已下载bootstrap 3.X [https://v3.bootcss.com/getting-started/\download][https_v3.bootcss.

忘是亡心i/ 2022年04月23日 12:18/ 0 赞/ 336 阅读

相关 Bootstrap教程(一)Font Awesome图标字体库

一.下载地址:[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com] ![watermark

深碍√TFBOYSˉ_/ 2022年03月18日 01:44/ 0 赞/ 325 阅读

相关 Bootstrap 字体图标 Glyphicons 使用

Intro Bootstrap捆绑了200多种字体格式的字形。字体图标：在Web项目中使用的图标字体。依赖两种方式，直接在HTML中使用CDN，或依赖本

比眉伴天荒/ 2022年01月30日 10:51/ 0 赞/ 310 阅读