最简单的Bootstrap4无法使用icon字体图标的解决办法

最新推荐文章于 2023-06-20 16:41:12 发布

做我的code吧

最新推荐文章于 2023-06-20 16:41:12 发布

阅读量2.2k

点赞数 3

分类专栏：前端文章标签： css html jquery

本文链接：https://blog.csdn.net/yueguangMaNong/article/details/115214423

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Bootstrap4无法使用icon字体图标的解决办法

最近准备搞个博客项目，css库选择了Bootstrap4，因为之使用Bootstrap3很长一段时间，足够熟悉。但是没想到在使用功能图标时遇到了困难，bootstrap4默认移除了icon字体图标库，所以没法使用。

在官网扫视了一下，只看到npm安装图标库的方法，但是我这个是个纯静态页面，也非常简单，不想使用npm，然后习惯性打开百度搜索。搜索出来的结果要么麻烦（直接贴出了整个icon的css文件内容），要么过时（复制bootstrap3的图库到bootstrap4中来使用）。最后还是在官网找到了解决方法。

1. 进入官网

进入bootstrap的官方图库网站: https://icons.bootcss.com/#install

2. 选择【安装】按钮

点击快速访问的【安装】链接，进入到安装步骤

然后选择最右边的通过公告CDN加载方式，将标签复制到HTML中即可，具体用法下面有说明

3.安装使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首頁</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
  ...
</head>
  <body>
    ...
    <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
    ...
  </body>
</html>

4.效果

后记

其实方法就在官网中，只不过被下面的图表蒙蔽了双眼，没看见【安装】按钮，还是太过浮躁！！！

做我的code吧

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
最简单的Bootstrap4无法使用icon字体图标的解决办法

Bootstrap4无法使用icon字体图标的解决办法最近准备搞个博客项目，css库选择了Bootstrap4，因为之使用Bootstrap3很长一段时间，足够熟悉。但是没想到在使用功能图标时遇到了困难，bootstrap4默认移除了icon字体图标库，所以没法使用。在官网扫视了一下，只看到npm安装图标库的方法，但是我这个是个纯静态页面，也非常简单，不想使用npm，然后习惯性打开百度搜索。搜索出来的结果要么麻烦（直接贴出了整个icon的css文件内容），要么过时（复制bootstrap3的图库到bo
复制链接

扫一扫