为什么我的 glyphicon 铅笔很胖答案

【问题标题】：Why is my glyphicon pencil fat为什么我的 glyphicon 铅笔很胖
【发布时间】：2017-07-02 03:08:30
【问题描述】：

<h1 class="h1name" style="" ><bold><%= @user %></bold><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></h1>

我不知道为什么我得到的是一支粗字形铅笔，而不是 Bootstrap Components 网站上看到的正确铅笔。 http://getbootstrap.com/components/#glyphicons-how-to-use

 gem 'twitter-bootstrap-rails'

是我在我的 ruby on rails 项目中使用的引导版本

我正在使用roboto字体

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

另一个带有信封字形图标的示例

如果没有机器人字体，它看起来像这样（仍然与所需的非常不同）

【问题讨论】：

尝试使用其他图标代替铅笔，看看您是否遇到同样的问题？
检查图标字体是否被正确引用？
尝试为字体图标明确指定字体大小。即，.glyphicon-pencil{ font-size: 10px; } 只是一个建议。
添加字体大小不起作用:(
如果您检查具有“glyphicon glyphicon-pencil”类的跨度，开发人员工具是否显示它具有字体系列“Glyphicons Halflings”？另外，字体是否正确加载？在打开开发者工具的情况下重新加载页面后，检查开发者工具网络面板中的 404 错误。

标签： css ruby-on-rails twitter-bootstrap glyphicons

【解决方案1】：

我遇到了同样的问题，我尝试用cdn路径替换本地文件。它有效。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

【讨论】：