更改 Foundation Icon Fonts 3 的大小？答案

【问题标题】：Change size of Foundation Icon Fonts 3?更改 Foundation Icon Fonts 3 的大小？
【发布时间】：2016-11-14 23:55:24
【问题描述】：

我尝试在此处更改图标下载的大小：

http://zurb.com/playground/foundation-icon-fonts-3

在他们说的文档中：

<i class="fi-[icon]"></i>

所以例如我使用：

但是尺寸是16px，他们没有说我们怎么改...

【问题讨论】：

标签： css icons zurb-foundation foundation-icon-fonts foundation-icon-fonts-3

【解决方案1】：

假设您使用的是心形图标。

css 可能如下所示：

.fi-heart {
   font-size: 20px
}

使用你喜欢的任何尺寸而不是 20 像素。

【讨论】：

【解决方案2】：

让我们看看字体图标基础下载文件。您需要在其中一个图标的 preview.html 中检查元素。

<i class="step fi-power size-72"></i>

请在 12 到 72 之间添加尺寸。

【讨论】：

【解决方案3】：

如果您要使用更多具有完全相同外观的图标，则在下载的 css 中更改字体大小以继承并在本地 css 中创建一个具有所需字体大小的类，您可以将其应用于任何属性。

.fi-yen:before,....,.fi-zoom-in:before,.fi-zoom-out:before 
{
   font-family: "foundation-icons";
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  font-size:inherit;    #add this
}

在你的本地 css 文件中

.icons{
   font-size:25px;
 }

现在除了图标类之外，您还可以使用这个类。所以你的 html 看起来像这样

<span class="icons"><i class="fi-social-pinterest"></i></span>
<span class="icons"><i class="fi-social-twitter"></i></span>

【讨论】：