如何在网站启用 Boostrap 图标库
Mcenahle
撰写于 2024年 08月 16 日

Boostrap 图标库中,收集了大量图标,其中就包含了我最喜欢的“”图标。

那怎么给网站启用 Boostrap 图标库呢?

在网站的<head></head>标签内自定义内容,并输入以下代码即可完成:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

又该怎么用这个 图标呢?

只需要输入以下代码:

<i class="bi bi-box-arrow-up-right"></i>

Boostrap 使用文档:https://v5.bootcss.com/docs/

Boostrap 图标库:https://icons.bootcss.com/


番外篇:

{cat_hide}
其实,自从2022年12月12日以来,我就想获得这个图标的同款。一开始我以为这是一个字符,但是总是选不中,随即觉得这不是字符。2023年9月,发现这其实是图标,一开始用的fontawesome 4.0版本的external-link图标,后来升级到6.0版本,但总是不对。直到这两天随便搜图标库的时候,意外找到了 Boostrap,看到了这个link图标。613天的图标探索之旅,正式结束。
{/cat_hide}

如何在网站启用 Boostrap 图标库

Boostrap 图标库中,收集了大量图标,其中就包含了我最喜欢的“”图标。

那怎么给网站启用 Boostrap 图标库呢?

在网站的<head></head>标签内自定义内容,并输入以下代码即可完成:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

又该怎么用这个 图标呢?

只需要输入以下代码:

<i class="bi bi-box-arrow-up-right"></i>

Boostrap 使用文档:https://v5.bootcss.com/docs/

Boostrap 图标库:https://icons.bootcss.com/


番外篇:

{cat_hide}
其实,自从2022年12月12日以来,我就想获得这个图标的同款。一开始我以为这是一个字符,但是总是选不中,随即觉得这不是字符。2023年9月,发现这其实是图标,一开始用的fontawesome 4.0版本的external-link图标,后来升级到6.0版本,但总是不对。直到这两天随便搜图标库的时候,意外找到了 Boostrap,看到了这个link图标。613天的图标探索之旅,正式结束。
{/cat_hide}

那年今日
08月
16日

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论


显示答案提示