Html 如何向我的网站添加新的平面图标?
我有一个使用平面图标的网站模板。它有一个文件夹,其中包含文件flaticon.css、flaticon.eot、flaticon.ttf、flaticon.svg、flaticon.woff和其他一些文件。我可以通过简单地将CSS导入页面并执行类似于Html 如何向我的网站添加新的平面图标?,html,css,Html,Css,我有一个使用平面图标的网站模板。它有一个文件夹,其中包含文件flaticon.css、flaticon.eot、flaticon.ttf、flaticon.svg、flaticon.woff和其他一些文件。我可以通过简单地将CSS导入页面并执行类似于的操作来使用图标 现在我想下载一些新的平面图标并在我的网站上使用它们。我在flaticon.com上找到了一些,它让我可以选择以多种格式下载。如何“安装”这些文件并编辑我的CSS,以便我可以使用新图标,就像已经存在的图标一样 css文件包含如下内容:
的操作来使用图标
现在我想下载一些新的平面图标并在我的网站上使用它们。我在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文件中添加什么以使用它们?如前所述,您可以使用两个或多个字体,使用不同的字体系列名称
像这样:
@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"; }
下载所需的字体集并将其上载到网站的公共html文件夹中,然后使用它们提供的css代码。听起来您希望在发布的css上方设置字体,然后将每个类别的字体系列设置为新字体。如下所示:。