在Bootstrap 4導航欄中使用自定義圖標作爲按鈕navbar

我想在Bootstrap 4導航欄上放置一些自定義圖標按鈕。我試圖把按鈕像這樣的東西：在Bootstrap 4導航欄中使用自定義圖標作爲按鈕navbar

<a class="nav-item" href="#"> 
    <img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png"> 
</a>

按鈕顯示了在導航欄，但它在頂部對齊。我想讓它中間對齊（垂直）。我嘗試過各種CSS樣式，如邊距頂部和填充頂部，但它不會改變任何內容。我也試過給我們class =「d-inline-block align-middle」，但是圖標仍然對齊在頂部。

Screenshot of miss aligned icon. I scaled it to be small to better illustrate the problem

有人可以幫我用在引導4個導航欄圖標的正確方法？

來源

2017-06-28 Gøngevangen

短黑客嘗試下面的CSS：

.align-middle { 
 
    position:relative; 
 
    top:4px 
 
}

否則你可以設置填充，而不是行高，或從圖像中刪除浮動，並把它作爲內聯元素..

但是我會推薦像icomoon這樣的圖標字體工具來將自定義圖標放置在您的導航欄中。（http://icomoon.io/app/）

來源

2017-06-28 08:31:32

謝謝！這樣可行。使用http://icomoon.io/app/放置圖標有什麼好處？ –

如果你使用iconfonts，你可以像處理文本一樣處理它（CSS顏色，字體大小，文本對齊，懸停效果等）。此外，它只是一個請求，而不是多http請求，如果你需要大量的圖標...你的網站加載速度會更快，你有更多的選擇比使用PNG的...，因爲它的矢量格式，它會看起來更乾淨的每個設備（沒有模糊的邊緣）你看.. 。沒有一個理由，仍然使用PNG的圖標:) –

但是，如果我需要帶有幾種顏色的圖標，例如用帶有紅色十字的白線繪製的文檔圖標，該怎麼辦？這可以用圖標字體來完成嗎？ –

在Bootstrap 4導航欄中使用自定義圖標作爲按鈕navbar

回答

相關問題