如何添加新的flaticons到我的網站？

我有一個使用flaticons的網站模板。它有一個文件夾flaticon.css，flaticon.eot，flaticon.ttf，flaticon.svg，flaticon.woff和其他一些文件夾。我可以通過簡單地將CSS導入頁面並執行諸如<i class="flaticon-world-grid">之類的操作來使用圖標。如何添加新的flaticons到我的網站？

現在我想下載一些新的flaticons並在我的網站上使用它們。我在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文件，以便能夠使用它們？

來源

2016-08-24 Kidades

下載你想要並將其上傳到您的public_html文件夾爲您的網站，然後使用CSS代碼，他們提供 – mlegg

這聽起來像你想設置字體面上面的一組您發佈的CSS，然後將每個類的font-family設置爲新字體。如下所示：[https://css-tricks.com/snippets/css/using-font-face/](https://css-tricks.com/snippets/css/using-font-face/）。 –

正如here所提到的，您可以使用兩個或多個font-face，並使用不同的字體系列名稱。

像這樣：

@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"; }

來源

2017-02-27 10:33:15

如何添加新的flaticons到我的網站？

回答

相關問題