如何向我的网站添加新的平面图标？

Question

我有一个使用平面图标的网站模板。它有一个文件夹，其中包含 flaticon.css、flaticon.eot、flaticon.ttf、flaticon.svg、flaticon.woff 等文件。我可以通过简单地将 CSS 导入页面并执行类似<i class="flaticon-world-grid">.

现在我想下载一些新的平面图标并在我的网站上使用它们。我在 flaticon.com 上找到了一些，它让我可以选择以多种格式下载它。如何“安装”这些文件并编辑我的 CSS，以便我可以使用新图标，就像已经存在的图标一样？

css 文件的内容如下：

.flaticon-wand2:before {
    content: "\e0fb";
}
.flaticon-wealth:before {
    content: "\e0fc";
}
.flaticon-website34:before {
    content: "\e0fd";
}
.flaticon-world-grid:before {
    content: "\e0fe";
}

我应该下载哪种格式，将新文件放在哪里，以及将哪些内容添加到 css 文件中才能使用它们？

Answer 1

正如这里提到的，您可以使用两个或多个具有不同字体系列名称的字体。

像这样：

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

[class^="flaticon-"], [class*=" flaticon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: flaticon !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;  
}


.flaticon-arrows:before { content: "\f100"; }
.flaticon-back:before { content: "\f101"; }

/**

 New Fonts to add

 */

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

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

[class^="flaticon1-"]:before, [class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after, [class*=" flaticon1-"]:after {   
    font-family: Flaticon1;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;   
}
.flaticon1-shapes:before { content: "\f100"; }
.flaticon1-share:before { content: "\f101"; }