twitter-bootstrap 无法显示字体真棒图标?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21667461/
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
cant display Font awesome icons?
提问by Toubi
I just have started using Font Awesome in my MVC application which already have Bootstrap. I need to use some icons and I have copied font-awesome.cssinto my project but icons are not visible. I have inlucded only this css, not sure but want to ask if there are some other files to include as well ?
我刚刚开始在我已经有 Bootstrap 的 MVC 应用程序中使用 Font Awesome。我需要使用一些图标,并且已复制font-awesome.css到我的项目中,但图标不可见。我只包含了这个 css,不确定但想问是否还有其他一些文件要包含?
Here is how it is visible in my page:

这是它在我的页面中的可见方式:

In just checked in Firebug and its display in css panel is as below:

在刚刚签入的 Firebug 中,它在 css 面板中的显示如下:

Please guide how I can fix it.
请指导我如何修复它。
Thanks for your help and guidance
感谢您的帮助和指导
回答by rasyadi
You need to have fontsdirectory available and can be accessed in your web server. It is included in the download package from http://fortawesome.github.io/Font-Awesome/
您需要有可用的字体目录,并且可以在您的 Web 服务器中访问。它包含在来自http://fortawesome.github.io/Font-Awesome/的下载包中
Inside font-awesome.css, it needs to refer to fontsdirectory in order for it to display the icon image.
在 font-awesome.css 中,它需要引用fonts目录才能显示图标图像。
Hope this helps.
希望这可以帮助。
回答by Sean
Also, I have notice that I need to referr to the folder location in the "font-awesome.css" where to find the directory if you created one to hold all the font-awesome files. You can check that to make sure that its looking in the correct place and also make sure you have reference with 'bundles' in the App_Start and Shared/_Layout.cshtml
另外,我注意到我需要参考“font-awesome.css”中的文件夹位置,如果您创建了一个目录来保存所有字体真棒文件,那么我需要在其中找到该目录。您可以检查以确保它在正确的位置,并确保您在 App_Start 和 Shared/_Layout.cshtml 中参考了“bundles”
@font-face {
font-family: 'FontAwesome';`enter code here`
src: url('../Content/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../Content/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../Content/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../Content/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../Content/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
回答by Umair
Anyone still looking for an alternate answer, this method suggested on another StackOverflow answersolves the issue.
任何仍在寻找替代答案的人,在另一个StackOverflow 答案中建议的这种方法解决了这个问题。
Basically change the Build action on the .eot, .ttf, & .woff files to "Content" instead of the default value of "None". Doing this solved my issue.
基本上将 .eot、.ttf 和 .woff 文件上的构建操作更改为“内容”,而不是默认值“无”。这样做解决了我的问题。

