logo标签列表

如何在Bootstrap 3.0中使用字形图标？

htmlcsstwitter-bootstrap-3
86

我已经在Bootstrap 2.3中使用了glyphicons，但现在我已经升级到Bootstrap 3.0，无法使用图标属性。

在Bootstrap 2.3中，以下标签有效。

<i class="icon-search"></i>

在Bootstrap 3.0中，它没有起作用。

1
大家好，我已经按照相同的结构进行了操作，但是没有得到正确的 glyphicon 图标...一个未知的 0101 类型图像显示在那里，而不是 glyphicon。 - Shivang Gupta
谢谢，实际上问题是我直接使用了 .less 文件而没有将其转换为 css...哎呀 - Shivang Gupta
对于版本3.0.0，默认情况下它会中断。尝试了几个解决方案，但都不适用于我。 - Andrew_1510
我正在使用less.js直接使用.less文件时遇到此问题。当然，在这种情况下，我也希望看到它能够正常工作。 - Marc
9个回答
108
5
大家好，我已经按照相同的结构操作了，但是没有得到正确的 glyphicon 图标，取而代之出现了一个未知的 0101 类型图像。 - Shivang Gupta
你能展示一下包含Bootstrap和Glyphicons CSS的代码吗？在浏览器控制台中有看到任何错误吗？ - Carol Skelly
我已经正确地添加了这个...结构是css/fonts/....，css/less/...,css/bootstrap.min.css，在bootstrap.min.css中我已经包含了@import "less/bootstrap-glyphicons.less"; - Shivang Gupta
谢谢，实际上问题是我直接使用了 .less 文件而没有将其转换为 css...哎呀 - Shivang Gupta
17
单独的 CSS 文件链接似乎已损坏。 - Trevi Awater
显示剩余3条评论
29
1
Bootply迁移可以节省大量将代码转换为TWB 3的时间。非常有用，@Michael / Buhake-Sindi。 - Fernando Kosh
19

如果您下载了自定义的 Bootstrap 3 发行版，则必须：

  1. 从 https://github.com/twbs/bootstrap/archive/v3.0.0.zip 下载完整的发行版。
  2. 解压缩并上传名为 fonts 的整个文件夹到您的 Bootstrap 目录中，并与其他文件夹“css，js”放在一起。

示例 Before：

\css
\js
index.html

上传后的示例：

\css
\fonts
\js
index.html
这个完美地运行（2016年1月）。谢谢分享！ - Devner
6

如果你在使用less时，遇到了图标字体无法加载的问题，那么你需要检查一下字体文件的路径。前往文件variable.less，并更改@icon-font-path的路径即可解决该问题。

4

Bootstrap 3需要使用标签而不是标签。

<span class="glyphicon glyphicon-search"></span>`
3

如果您正在使用grunt构建应用程序，则可能在构建过程中路径会发生变化。在这种情况下，您需要像这样修改grunt文件：

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },
3

包含字体 将所有字体文件复制到靠近CSS的/fonts目录中。

  1. 包含CSS或LESS 有两种选项可以在项目中启用字体：纯CSS或源LESS。对于纯CSS，只需从存储库中的/css包含已编译的CSS文件即可。
  2. 对于LESS，请将/less中的.less文件复制到现有的Bootstrap目录中。然后通过@import "bootstrap-glyphicons.less";将其导入到bootstrap.less中。准备好后重新编译。
  3. 添加一些图标！添加字体和CSS后，您可以开始使用图标。例如，<span class="glyphicon glyphicon-ok"></span>

source

1
大家好，我已经按照相同的结构进行了操作，但是没有得到正确的 glyphicon 图标...一个未知的 0101 类型图像显示在那里，而不是 glyphicon。 - Shivang Gupta
2
从Bootstrap下载所有文件，然后包含此CSS。
<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>
0
请注意，仅链接答案是不被鼓励的，SO答案应该是寻找解决方案的终点（而不是另一个参考站点，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的摘要，将链接作为参考。 - kleopatra
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接