基础图标字体未正确调整大小答案

【问题标题】：Foundation Icon fonts not properly resizing基础图标字体未正确调整大小
【发布时间】：2014-07-18 00:41:02
【问题描述】：

我已使用“foundation-icons-sass-rails”gem 成功地将我的图标显示为链接，但是当我在我的 CSS 中尝试以下任一解决方案时，它们并没有调整大小：

.fi-heart {
  font-size: 72px;
 }

在我的 index.html.erb 中，它们看起来像这样：

 <div class="row">
 <% @pets.each do |pet| %>     
  <p class="button-left">
   <%= link_to pets_path do %>
     <i class="fi-paw large"></i>
   <% end %>
 </p>
 <p class="button-right">
   <%= link_to pet_friendships_path(pet), method: :post do %>
     <i class="fi-heart large"></i>
   <% end %>
 </p>

更新：最终从 FontAwesome 的引导图标问题中引用 this solution 并使其正常工作。

 <div class="row">
  <% @pets.each do |pet| %>
   <div class="button-left">
    <div style="font-size: 42px">
     <%= link_to pets_path do %>
      <i class="fi-paw"></i>
    </div>
   <% end %>
  </div>

【问题讨论】：

在 Firebug / Chrome 的开发者工具中检查您的图标并查看计算选项卡。展开它，您将看到当前大小的来源。也许您有一个更具体的规则来覆盖上述内容。
当我检查它时，我在侧边栏中看到media="all" em, i { font-style: italic; line-height: inherit; }。

标签： css ruby-on-rails zurb-foundation

【解决方案1】：

我遇到了同样的问题，添加小中类或大类不起作用。我将以下代码添加到我的 CSS 中以使其正常工作。

i.small  { font-size: 0.8rem; }
i.medium  { font-size: 1rem; }
i.large  { font-size: 1.2rem; }

希望对您有所帮助。

【讨论】：

【解决方案2】：

基础图标small medium and large 有 3 种默认尺寸，可以像这样使用

 <i class="fi-widget large"></i>

如果您需要更具体地调整大小，则需要添加自定义 css

 <i class="fi-heart custom-size"></i>

并在那里添加字体大小

【讨论】：

我最初使用large 代码调用它，但我认为我仍然必须在 application.css 中对其进行编辑，但无论使用哪种方式，都不会发生调整大小。如果图标显示并作为链接工作，我不明白为什么调整大小不起作用。
大的正在覆盖图标大小，这是一个加载顺序问题，这就是为什么我说添加一个新的 css