改变基础图标字体大小3?

I try to change the size of my icon download here :

我尝试改变我的图标下载的大小:

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

In the documentation they say :

在文件中他们说:

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

So for exemple i use :

举个例子:

But the size is 16px and they don't say how can we change...

但是大小是16px，题目没说怎么改变。

3 个解决方案

#1

Lets say you are using the heart Icon.

让我们说你正在使用心脏图标。

The css may looks like that:

css可能是这样的:

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

Use what ever size you like instead of the 20px.

用你喜欢的尺寸而不是20px。

#2

Lets take a look in font icon foundation download file. You need to inspect element there in preview.html of one of icon.

让我们来看看字体图标基础下载文件。您需要在预览中检查那里的元素。html的一个图标。

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

Please add size between 12 and 72.

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

#3

If you are gonna use more icons with exact same appearance then in the downloaded css change the font-size to inherit and create a class in your local css with the required font-size, you can apply this to any property.

如果要使用更多具有完全相同外观的图标，那么在下载的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
}

and in your local css file

在你的本地css文件中。

.icons{
   font-size:25px;
 }

now you are good to use this class in addition to your icon class. so your html will look something like this

现在，除了图标类之外，您还可以使用这个类。你的html会是这样的

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

#1