Question

我想使用其他字形，而不是标准的引导程序，例如dog。

我正在遵循这条指令[LINK]

在HTML中：

<link href="css/bootstrap.icon-large.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>

<span class="glyphicons-icon dog"></span>

我的目录树：

.
├── README.md
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.icon-large.css
│   ├── bootstrap.icon-large.min.css
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons.png
├── img
│   └── glyphicons.png -> ../glyphicons.png
├── index.html
└── js
    ├── bootstrap.js
    └── bootstrap.min.js

4 directories, 18 files

Answer 1

您使用了错误的CSS类，请尝试以下HTML：

<span class="icon-large icon-dog"></span>

当您检查bootstrap.icon-large.css文件的来源时，您会找到原因：

.icon-large {
    background-image: url("../img/glyphicons.png");
    background-position: 24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    vertical-align: text-bottom;
    width: 28px;
}
.icon-large.icon-glass{ background-position: 0 0;  } 
.icon-large.icon-leaf{ background-position: 0 -34px;  } 
.icon-large.icon-dog{ background-position: 0 -69px;  }

如何添加额外的glyphicons到bootstrap 3

1 个答案: