如何在我的html中使用Flaticon中的圖標？

我想給我的網站一些圖標。現在我看到很多人使用這個網站Flaticon。如何在我的html中使用Flaticon中的圖標？

我所做的是把這樣的事情在我的CSS：

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

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

.flaticon1-basic21:before { 
    content: "\e000"; 
} 

.flaticon1-bicycle21:before { 
    content: "\e001"; 
} 

.flaticon1-car6:before { 
    content: "\e002"; 
} 


/**  
* Font 2  
*/  
@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") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

[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-basic21:before { 
    content: "\e000"; 
} 

.flaticon2-bicycle21:before { 
    content: "\e001"; 
} 

.flaticon2-car6:before { 
    content: "\e002"; 
}

http://support.flaticon.com/hc/en-us/articles/205019862-CSS-code-for-Iconfont-

我下載想要的圖標，但它不顯示圖標。它顯示了這一點：

我做了什麼錯？

來源

2017-04-25 Boxman

您可能沒有在您的項目中正確包含字體文件。你在控制檯中看到錯誤嗎？你對CSS中的url（）有什麼期望，圖標字體文件與CSS文件位於同一個文件夾中。 – hungerstar

@hungerstar你說得對，控制檯說的是它無法加載資源（ERR_FILE_NOT_FOUND）。我確實有圖標字體文件在同一個文件夾中。這是否意味着我將其命名不當？ – Boxman

可能。 'url（）'中的文件名是否與你的CSS匹配？你是否可能缺少一種字體文件類型？您通常需要有多種類型，即'tff'，'woff'，'svg'，才能與大多數瀏覽器一起使用。也許你錯過了一個，那就是錯誤所在。 – hungerstar

顯然我下載了文件格式，而不是字體文件。在將圖標放入收藏夾後，我只能將圖標下載爲Iconfont或SVG sprite。它下載整個課程的集合。

來源

2017-04-26 21:26:47 Boxman

1.準備您的收藏

單色圖標添加到收藏爲您的網站

2.下載iconfont

打開你的收藏，然後按下載收藏按鈕，然後選擇Iconfont

3.準備你的收藏

將源文件和CSS複製到您的Web文件夾中。

4.將樣式表

請求從腹板的頭部的CSS樣式表。

< link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css" >

5.使用類

每個圖標的使用的classes，他們將出現在您的網站。之後，用CSS操作它們。使用示例：

<i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>

來源

2017-10-10 06:50:03

如何在我的html中使用Flaticon中的圖標？

回答

相關問題