Question

我正在尝试在我的wordpress网站上添加自定义的Flaticon图标，该图标可以在本地服务器上运行，但是当您尝试实时进行操作时却没有出现。

我添加了两种不同类型的字体Flaticon和Flaticon2

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       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-add:before { content: "\f100"; }
.flaticon-ammeter:before { content: "\f101"; }
.flaticon-arrow:before { content: "\f102"; }
.flaticon-arrows:before { content: "\f103"; }
.flaticon-arrows-1:before { content: "\f104"; }
.flaticon-arrows-10:before { content: "\f105"; }
.flaticon-arrows-2:before { content: "\f106"; }
.flaticon-arrows-3:before { content: "\f107"; }
.flaticon-arrows-4:before { content: "\f108"; }
.flaticon-arrows-5:before { content: "\f109"; }
.flaticon-arrows-6:before { content: "\f10a"; }
.flaticon-arrows-7:before { content: "\f10b"; }
.flaticon-arrows-8:before { content: "\f10c"; }
.flaticon-arrows-9:before { content: "\f10d"; }
.flaticon-back:before { content: "\f10e"; }
.flaticon-barrel:before { content: "\f10f"; }
.flaticon-battery:before { content: "\f110"; }
.flaticon-battery-1:before { content: "\f111"; }
.flaticon-book:before { content: "\f112"; }
.flaticon-business:before { content: "\f113"; }
.flaticon-business-1:before { content: "\f114"; }
.flaticon-business-2:before { content: "\f115"; }
.flaticon-business-3:before { content: "\f116"; }
.flaticon-cancel:before { content: "\f117"; }
.flaticon-cancel-1:before { content: "\f118"; }
.flaticon-checked:before { content: "\f119"; }
.flaticon-circular-saw:before { content: "\f11a"; }
.flaticon-clock:before { content: "\f11b"; }
.flaticon-cogwheel:before { content: "\f11c"; }
.flaticon-cogwheel-1:before { content: "\f11d"; }
.flaticon-communication:before { content: "\f11e"; }
.flaticon-communication-1:before { content: "\f11f"; }
.flaticon-communication-2:before { content: "\f120"; }
.flaticon-communication-3:before { content: "\f121"; }
.flaticon-delete:before { content: "\f122"; }
.flaticon-download:before { content: "\f123"; }

FlatIcon 2

/*
  	Flaticon icon font: Flaticon
  	Creation date: 02/09/2018 12:17
  	*/

@font-face {
  font-family: "Flaticon2";
  src: url("./Flaticon2.eot");
  src: url("./Flaticon2.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon2.woff") format("woff"),
       url("./Flaticon2.ttf") format("truetype"),
       url("./Flaticon2.svg#Flaticon2") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon2";
    src: url("./Flaticon2.svg#Flaticon2") format("svg");
  }
}

[class^="flaticon2-"]:before, [class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after, [class*=" flaticon2-"]:after {   
  font-family: Flaticon2;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon2-solar-energy:before { content: "\f200"; }
.flaticon2-lamp-post:before { content: "\f300"; }
.flaticon2-street-light:before { content: "\f400"; }
.flaticon2-lamp-post-1:before { content: "\f500"; }

flaticon2的函数调用

wp_enqueue_style( 'energy-flaticon2', get_template_directory_uri() . '/vendors/flaticon/energy/font/flaticon2.css' );

并且我将flaticon2 css代码编辑为flaticon，但是我无法使用

尝试添加自定义Flaticon图标

0 个答案: