如何查找圖形文件以編輯社交圖標

我正在使用稱爲Divi的WordPress主題。這不是一個WordPress問題。有一些提供的社交媒體圖標，但我需要一個Soundcloud圖標，並且不提供。我不理解這些圖標是如何填充頁面的，因爲它們似乎不是圖形，而是一種字體？但是，我無法從源代碼中知道發生了什麼事（經驗不足）。如何查找圖形文件以編輯社交圖標

我想要做的是要麼添加我的設計圖標，要麼替換現有的圖標。如果我應該在我的文件中查找以查找實際圖標，有人可以幫助指點我嗎？

你可以在這裏看到一個活的站點和圖標右上方： http://rattletree.com/wordpress2/

dev的代碼有此爲Facebook圖標：

<ul class="et-social-icons"> 

<li class="et-social-icon et-social-facebook"> 
    <a href="#" class="icon"> 
     <span>Facebook</span> 
    </a> 
</li> 
</ul>

而CSS有這樣的：

.et-social-facebook a.icon:before { 
content: "\e093"; 
} 
#top-header .et-social-icon a { 
font-size: 14px; 
}

因此，這讓我覺得這是一種字體，但我不知道如何或在哪裏可以編輯該字體？謝謝你的幫助！

來源

2015-11-22 Joel

這看起來像字體包你正在使用：

http://www.elegantthemes.com/blog/resources/elegant-icon-font

它看起來並不像它具有的SoundCloud的圖標，但你可以使用雲中的一個：

&#xe002;

所以只需將其添加到樣式表中：

.et-social-soundcloud a.icon:before { 
    content: "\e002"; 
}

另外，她e的教程： https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website

來源

2015-11-23 00:30:26 Palle

感謝您的回覆。我已經看過那些教程和那個雲，但它不是真正的圖標，所以我不認爲它會傳達我們想要的。我需要知道的是如何進入該字體文件並能夠對該文件進行編輯？ – Joel

我不會推薦它。除非您熟悉字體編輯軟件，否則向它添加另一個圖標將是一件困難的任務。我會建議在wordpress中將一個小圖標圖像上傳到您的媒體庫中，然後將其從css文件引用爲背景圖像。 – Palle

但是，如果您正在查找字體文件，則可以在您的主題文件夾中找到它：/ includes/builder/fonts/ETmodules_v2_4。將有4種類型，EOT，TTF，WOFF和SVG。 – Palle

要添加您的設計圖標，請將以下代碼添加到您的樣式表中。

#top-header .et-social-icon.soundcloud a { 
    width: 15px; 
    height: 25px; 
} 
.soundcloud a.icon:before { 
    content: ""; 
    background: url('https://placehold.it/15x25') 100% 100% no-repeat; 
    height: 100%; 
    width: 100%; 
    display: inline-block; 
}

確保您創建圖標，將圖標圖像添加到主題文件夾並更新上述代碼中的URL以指向該圖像。

還將類soundcloud添加到WordPress後端的菜單中。

來源

2015-11-23 07:32:00

如何查找圖形文件以編輯社交圖標

回答

相關問題