时间戳

首页 > 解决方案 > Flaticon CSS：更改一个图标的大小，而不是全部

css - Flaticon CSS：更改一个图标的大小，而不是全部

问题描述

我正在使用来自https://www.flaticon.com的 flaticon 图标

我正在尝试调整其中一个图标的大小并使其他图标保持相同大小。我可以更改“flaticon.css”中的字体大小，但所有图标都会更改其大小。

是否可以仅更改一个图标的字体大小？

flaticon.css：

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff2") format("woff2"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-can:before { content: "\f100"; }
.flaticon-interface:before { content: "\f101"; }
.flaticon-healthcare:before { content: "\f102"; }
.flaticon-kitchen:before { content: "\f103"; }

标签： css

解决方案

是的。只需将font-size规则添加到您要更改的特定项目。我建议在您自己的样式表中执行此操作，而不是修改 flaticon.css，但任何一种方式都可以。

.flaticon-healthcare::before {
  content: "\f102";
  font-size: 48px;
}

推荐阅读