Question

我正在使用Flaticon开发我正在开发的网站，但似乎出现了问题，我无法找到答案。

我从flaticon下载了带有“icon font”选项的zip文件。所以我把它上传到我的字体的文件夹但是由于某种原因，当我链接css并在我的html中放置<i class="flaticon-crowd"><i>时，我得到了默认大小的图标但是当我把font-size:70px;放在css中时不会变大。

我可以color: #f00;，文字变成红色，所以它不是选择器。同样在chrome中的def工具中，使用70px字体大小而不是否决。

有人知道造成这个问题的原因是什么吗？

谢谢你的时间。

以下是我使用的html示例

<!DOCTYPE html>
<html>
    <head>
        <!-- flaticon -->
        <link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css">

        <title></title>
    </head>
    <body>
        <i style="font-size: 70px" class="flaticon flaticon-crowd"></i>
    </body>
</html>

Answer 1

更好的解决方案是：

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {

font-size: 1em;

}

然后可以使用font-size

修改其他类的图标大小

Answer 2

在css中使用此类来更改字体大小。

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {

font-size: 150px;

}

希望它能解决您的问题。

Answer 3

这对我有用：

.flaticon-fast46::before{
font-size: 40px;}

Answer 4

您肯定可以将subDeals添加到您的css声明中

例如：

!important

Answer 5

在flaticons.css中，将默认类更改为：

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: "Flaticon" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Answer 6

它为我工作。在要用于图标的元素类之后添加:before。

span:before{
font-size: 50px;
}

Answer 7

flaticon.css文件包含用于指定 font-size：20px; 这适用于所有平面图标。您可以删除该条目以自由编辑单个图标，也可以在同一行中指定首选图标大小，该大小将反映在所有图标中。

Answer 8

只需删除＆＃39; font-size：20px;＆＃39;在flaticon.css文件中找到，然后您就可以在css文件中设置所需的大小。

无法使用font-size调整flaticon的大小

8 个答案: