Html 如何在 bootstrap 3.0 中使用字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18205738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use glyphicons in bootstrap 3.0
提问by Shivang Gupta
I have already used glyphicons in bootstrap 2.3 but now I have upgraded to bootstrap 3.0. Now, I am unable to use the icon property.
我已经在 bootstrap 2.3 中使用过字形，但现在我已经升级到 bootstrap 3.0。现在，我无法使用 icon 属性。
In bootstrap 2.3, below tag is working
在引导程序 2.3 中，下面的标签正在工作
<i class="icon-search"></i>
In bootstrap 3.0, it's not working.
在引导程序 3.0 中，它不起作用。
回答by Zim
The icons (glyphicons) are now contained in a separate css file...
图标（glyphicons）现在包含在一个单独的css文件..。
The markup has changed to:
标记已更改为：
<i class="glyphicon glyphicon-search"></i>
or
或者
<span class="glyphicon glyphicon-search"></span>
Here is a helpful list of changes for Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide
以下是 Bootstrap 3 的有用更改列表：http: //bootply.com/bootstrap-3-migration-guide
回答by TheNiceGuy
There you go:
你去吧：
<i class="glyphicon glyphicon-search"></i>
More information:
更多信息：
http://getbootstrap.com/components/#glyphicons
http://getbootstrap.com/components/#glyphicons
Btw. you can use this conversion tool, this will also update the code for the icons:
顺便提一句。您可以使用此转换工具，这也将更新图标的代码：
回答by Emiliano Díaz
If yout download a customized bootstrap 3 distro you must:
如果您下载定制的 bootstrap 3 发行版，您必须：
- Download the full distro from https://github.com/twbs/bootstrap/archive/v3.0.0.zip
- Uncompress and upload the entire folder called
fontsto your bootstrap directory. Put together with the other folders "css, js".
- 从https://github.com/twbs/bootstrap/archive/v3.0.0.zip下载完整发行版
- 解压缩并将整个文件夹上传
fonts到您的引导程序目录。与其他文件夹“css，js”放在一起。
Example Before:
之前的例子：
\css
\js
index.html
Example After Upload:
上传后示例：
\css
\fonts
\js
index.html
回答by alejandro
If you're using less , and it's not loading the icons font you must check out the font path go to the file variable.lessand change the @icon-font-pathpath , that worked for me.
如果您使用的是 less ，并且它没有加载图标字体，您必须检查字体路径，转到文件variable.less并更改@icon-font-path路径，这对我有用。
回答by stranger4js
Bootstrap 3 requires span tag not i
Bootstrap 3 需要 span 标签而不是 i
<span class="glyphicon glyphicon-search"></span>`
回答by Anke Wenz
If you are using grunt to build your application, it's possible that during build the paths change. In this case you need to modify your grunt file like this:
如果您使用 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
}]
}
},
回答by Mark Anthony Uy
Include the fonts Copy over all the font files to a /fonts directory near your CSS.
包含字体 将所有字体文件复制到 CSS 附近的 /fonts 目录中。
- Include the CSS or LESS You have two options for enabling the fonts in your project: vanilla CSS or source LESS. For vanilla CSS, just include the compiled CSS file from the /cssin the repository.
- For LESS, copy over the .lessfiles from /lessinto your existing Bootstrap directory. Then import it into bootstrap.lessvia @import "bootstrap-glyphicons.less";. Recompile when ready.
- Add some icons! After you've added the fonts and CSS, you can get to
using the icons. For example,
<span class="glyphicon glyphicon-ok"></span>
- 包含 CSS 或 LESS 您有两个选项可以在项目中启用字体：vanilla CSS 或源代码 LESS。对于 vanilla CSS，只需在存储库中包含/css中已编译的 CSS 文件。
- 对于 LESS，将.less文件从/less复制到现有的 Bootstrap 目录中。然后通过@import“bootstrap-glyphicons.less”将其导入bootstrap.less ；. 准备好后重新编译。
- 添加一些图标！添加字体和 CSS 后，您就可以开始使用图标了。例如，
<span class="glyphicon glyphicon-ok"></span>
回答by User_3535
Download all files from bootstrap and then include this css
从引导程序下载所有文件，然后包含此 css
<style type="text/css">
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');
}
</style>
回答by Mushu
This might help. It contains many examples which will be useful in understanding.
这可能会有所帮助。它包含许多有助于理解的示例。
http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
