Bootstrap Calendar Glyphicons无法正常显示

Question

我有Bootstrap表单，其中包含日历图标到表单组，如下图所示。

我只有在添加日历图标时才会遇到问题所有其他图标都能正常工作。

<i class="glyphicon glyphicon-calendar"></i>

Answer 1

确保字体目录是否正确安装。

应位于your_project_folder / bootstrap / fonts /

中

另外，请确保您写得正确：

此处列出了所有可用的字形： http://getbootstrap.com/components/#glyphicons

Answer 2

这发生在我身上。

当您看到boostrap.css时，您会看到：

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

因此，当您使CSS文件离线时，它将在本地查找字体文件，而找不到该字体文件。因此，您要做的就是创建一个名为fonts的文件夹，该文件夹比css文件高一级。

那是

|
|
-css---bootstrap.css
|
-fonts ---glyphicons-halflings-regular.eot
        |
        |
        --glyphicons-halflings-regular.woff

我的字形仅在下载了这两个文件后开始工作。您可能需要下载更多内容。

这些文件的链接：

• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.eot
• https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff

如果您需要更多类似文件，只需更改文件名，即可获得它们。