html開發(fā)筆記15-圖片標(biāo)簽-向網(wǎng)頁添加圖片

、圖片標(biāo)簽是用 <img> 單標(biāo)簽來定義：

作用是向網(wǎng)頁中添加圖片，并且img標(biāo)簽有多個(gè)可用參數(shù)可以添加。

二、代碼演示

頭條創(chuàng)作挑戰(zhàn)賽#

本文同步本人掘金平臺(tái)的原創(chuàng)翻譯：https://juejin.cn/post/7066995441165926413

直接上正文～

1. Feathericons

Feathericons 是精美的開源圖標(biāo)集合，每個(gè)圖標(biāo)按照24 * 24的規(guī)格進(jìn)行設(shè)計(jì)。

特性?

開源（免費(fèi)使用）
可通過 NPM 包安裝
可通過 CDN 引用
圖標(biāo)制作精美

2. Ionicons

針對web、iOS、Andriod和桌面應(yīng)用是一個(gè)很優(yōu)質(zhì)的圖標(biāo)庫。支持SVG和web font。

特性?

開源（免費(fèi)使用）
可通過 NPM 包安裝
可通過 CDN 引用
圖標(biāo)制作精美
有不同選擇：輪廓，填充和銳化

3. Boxicons

簡單的開源圖標(biāo)，適合設(shè)計(jì)師和相關(guān)開發(fā)者。

特性?

開源（免費(fèi)使用）
可通過 NPM 包安裝
可通過 CDN 引用
圖標(biāo)制作精美
有不同選擇：規(guī)則，實(shí)體和品牌圖

4. Heroicons

SVG 圖標(biāo)，由很火的 Tailwind CSS 制作者引導(dǎo)。

Tailwind CSS 可以打開你編寫樣式的新大門，感興趣可以了解下。

特性?

開源（免費(fèi)使用）
可通過 NPM 包安裝
可直接復(fù)制 SVG 代碼 ?
圖標(biāo)制作精美
社區(qū)強(qiáng)大

5. CSS Icons

此開源的圖標(biāo)可支持僅純CSS代碼編寫，也可支持其它不同的形式，如：SVG, Figma等。如果你在站點(diǎn)性能上追求極致，推薦你使用這個(gè)庫。它的存CSS代碼的編寫，能減少額外的圖標(biāo)請求鏈接的請求。??

特性?

開源（免費(fèi)使用）
可通過 NPM 包安裝
可通過 CDN 引用
圖標(biāo)制作精美
圖標(biāo)可以僅通過 CSS 完成，使得你項(xiàng)目性能更高

當(dāng)然還有很多的圖標(biāo)庫可以推薦給大家，但是，上面的 5 個(gè)已經(jīng)很好并且已經(jīng)夠用了。讀者可以選擇適合自己的圖片庫去使用。

后話

原文：Top 5 Best Javascript Icons Libraries

里云字體圖標(biāo)

https://www.iconfont.cn/

搜索(如search)->添加到項(xiàng)目->新建項(xiàng)目->輸入項(xiàng)目的名稱->imooc->確定->圖標(biāo)管理->我的項(xiàng)目

->查看在線鏈接->點(diǎn)擊復(fù)制代碼

如: //at.alicdn.com/t/font_1938354_qkmgv0wrqn.css

用瀏覽器查看

@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.eot?t=1594516550737'); /* IE9 */
src: url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.eot?t=1594516550737#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABnQAAAKHAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEYATYCJAMICwYABCAFhG0HMBu+Bcg+QDZkA/VFtNCYsKMQslzfV5PE3kH8mC1MBNEaOnt3QVSICiSgBtRRUXFx8ahQt8LUCCBVzbosfP/+19qceajz+nm85HjSujp/xWcHax6JlEyoeCORITTc4JJ50k22WVLvu23OKK01Q0hkvYaJ4WunJ9v3mlWRcuTgdStdgP8H19SPzSMxD2hunRSVHAk4sOkAo4pGtpGMfMPYBS7hOIFGA/oKW1sHx1BXWOMCceY5BtRzXkVhiXqhtmZpEfdCfbpNH3EXfj/+mY86SU1mleyebmyY/yw7JV9XjI/wQUCra5AxBxTisDa6rSQYtaQxWjYC9lUY/KTqW8RejYL9dVZ+M+iDonsSu5JbzU+gxN0jwNqoq0i9XJ3+GH9avXbH7n7y4vlFpLjsNpLu4qT39NS0UJWX1RePlCus8qq6zQ48+uyf/ruOL7n3nwbu/OE9A9eHLyfb8v7Dgj9QMf/IQgHBdTe1XLreVMB3LjN0Vyz62UH9/m3BfxL3bCq61DKnoopr7cnIqLEJjRpRATs7/Y3V9dxUMtTruTV7nf4UsnpjaCHOQY0mi1Cr3io0mrW9ukkXVhKlATMeAIR2z5C0eglZu2+0EH+hRq9/qNUeJWh0HF1bNpkIr7nJZAjZaF6hZyWxcqzSjAoPyTkLDc5KQ/Ypce4FcDIcFxPbFBPPMSM/d6YiChUnEW6B0ygME0w58cmSoSuSzkYjVfemoZVE0LSJEYMgNmS6gjyWREz5nUWz9PlDxHEmZOCWsprgKcJyXu9oYmjcA91Wxb3K7uWV3DnHlBAKUlgigrbAIBIKJVBaP8hHLGLIHRFOzYzsdqqvari+JvqAQlaFpU9h98tqz8lgywUAAA==') format('woff2'),
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.woff?t=1594516550737') format('woff'),
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.ttf?t=1594516550737') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1938354_qkmgv0wrqn.svg?t=1594516550737#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
content: "\e630";
}

在開發(fā)項(xiàng)目中新建目錄和文件common/css/icons.css

刪除一些url和src代碼, 只留下base64代碼(自定義字體圖標(biāo)庫, 建議使用 base64 格式的字體)

在線咨詢

上一篇：純CSS實(shí)現(xiàn)3個(gè)圓圈橫向排列不斷閃爍的Loading特效
下一篇：詳細(xì)解析html字體屬性

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商