Twitter 引导图标不可见答案

【问题标题】：Twitter bootstrap icon not visibleTwitter 引导图标不可见
【发布时间】：2013-03-14 18:55:18
【问题描述】：

使用 twitter bootstrap 我设计了这两个页面，奇怪的是图标只在一个页面上可见，而在其他页面上不可见..

https://music-cloud.ap01.aws.af.cm/index.html

<ul class="nav">
  <li class="active"><a href="#"><i class="icon-home"></i>&nbsp;Home</a></li>
  <li ><a href="login.html"><i class="icon-signin"></i>&nbsp;Login</a></li>
  <li ><a href="register.html"><i class="icon-group"></i>&nbsp;Register</a></li>
</ul>

https://music-cloud.ap01.aws.af.cm/login.html

<ul class="nav">
  <li ><a href="index.html"><i class="icon-home"></i>&nbsp;Home</a></li>
  <li class="active"><a href="#"><i class="icon-signin"></i>&nbsp;Login</a></li>
  <li ><a href="register.html"><i class="icon-group"></i>&nbsp;Register</a></li>
</ul>

【问题讨论】：

可能值得一提的是，这些图标是 FontAwesome...

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

你错过了这个 css 文件..font-awesome.css

图标样式在 font-awesome.css 中定义

【讨论】：

【解决方案2】：

正如已经指出的，查看两个页面的来源，只有一个包含对font-awesome的引用：

  <link rel=StyleSheet href="css/font-awesome.css" type="text/css" media=all>

即：https://music-cloud.ap01.aws.af.cm/login.html

使用通用头文件并使用绝对 URL 将有助于确保在移动内容或目录时不会遗漏或中断任何必需的包含：

  <link rel=StyleSheet href="/css/font-awesome.css" type="text/css" media=all>
                             ^

【讨论】：