bootstrap集成font awesor图标不显示

原创于 2013-10-30 11:45:47 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何排查和解决Font Awesome图标在Bootstrap中显示异常的问题，包括检查版本兼容性、使用Chrome调试工具定位问题所在，以及通过引入特定版本的CSS文件确保正确显示。

从以下几点入手查找问题：

1、检查font awesor版本对于bootstrap最低要求，如果版本不匹配则无法正常显示。

2、通过chrome调试查看对应元素css是否已经被浏览器正常加载，如果没有可以通过1来分析。

3、通过

Paste the following code into the <head> section of your site's HTML.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Want to use Font Awesome by itself without Bootstrap? Just don't include the first line.

Pat yourself on the back for your scalable-vector-icons-on-the-website judo solution in two lines of code.
Check out the examples to start using Font Awesome!