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

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

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

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

1. 进入官网

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

最简单的Bootstrap4无法使用icon字体图标的解决办法_第1张图片

2. 选择【安装】按钮

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

最简单的Bootstrap4无法使用icon字体图标的解决办法_第2张图片

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

3.安装使用


<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/[email protected]/font/bootstrap-icons.css">
  ...
head>
  <body>
    ...
    <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;">i>
    ...
  body>
html>

4.效果

后记

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

你可能感兴趣的:(前端,css,html,jquery)