如何在本地使用bootstrap中的图标

Question

在这种情况下

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

使用此参考时我可以看到图标：

<button type="reset" class="btn btn-warning cancel">
    <i class="glyphicon glyphicon-ban-circle"></i>
    <span>Cancel upload</span>
</button>

但是如果我在本地下载文件（从此链接），它不起作用，我再也看不到图标了：

<link rel="stylesheet" href="MyFolder/bootstrap.min.css" />

Answer 1

您必须下载 Glyphicon 字体的文件并将它们放在

fonts

文件夹旁边的

css

文件夹中：

your_site_root/
    css/
        bootstrap.min.css
    fonts/
        glyphicons-halflings*.*

我建议您从官方网站下载Bootstrap包。分发 ZIP 文件将包含使用 Bootstrap 构建网站所需的所有文件，包括 CSS、JS 和字体文件。

Answer 2

我想我知道你要做什么。

如果您希望将图标本地化到您的网站项目中，我就是这样做的，这是一种“.woff”方式：

• 我从（https://github.com/twbs/icons/releases）下载了最新版本的引导程序图标并解压它

从 zip 中解压后，下载的文件夹结构如下所示 [（括号）中的内容是简化的]：

bootstrap-icons-(version number)/
    bootstrap-icons-(version number)/
        (a bunch of .SVGs)
        font/
            bootstrap-icons.css
            bootstrap-icons.json
            bootstrap-icons.min.css
            bootstrap-icons.scss

            fonts/
                bootstrap-icons.woff
                bootstrap-icons.woff2

这是我的基本网站项目结构：

my-website-project/
    css/
    fonts/
    index.html

• 我将“bootstrap-icons-（版本号）”文件夹的“fonts”文件夹中的“.woff”和“.woff2”文件复制到我项目的字体文件夹中
• 然后我将“bootstrap-icons-（版本号）”文件夹的“font”文件夹中的“bootstrap-icons.css”文件复制到我项目的css文件夹中，缩小后的“bootstrap-icons.min.css”也可以。

这是移动文件后我的基本网站项目结构：

my-website-project/
    css/
        bootstrap-icons.css
    fonts/
        bootstrap-icons.woff
        bootstrap-icons.woff2
    index.html

• 从那里我刚刚指定了“bootstrap-icons.css”中“.woff”和“.woff2”文件所在的目录

我在“bootstrap-icons.css”的第10行和第11行（目前行号可能会改变）的路径前面添加了一个点：

src: url('../fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6') format("woff2"),
url('../fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6') format("woff");

我敢打赌人们已经知道这一点，但为了以防万一，url 前面的“../”指向执行目录（css 文件“运行”的位置）后面的一个文件夹。

我的简单网站项目样式表链接如下所示：

<link rel="stylesheet" type="text/css" href="./css/bootstrap-icons.css">

希望这能帮助其他人实现这一目标！