App下載

前端頁面如何引入小圖標？CSS字體的另類使用方式！

猿友 2021-07-23 17:19:10 瀏覽數(shù) (4902)
反饋

相信很多小伙伴都在網(wǎng)頁中結果一個個的小圖標.在學習完html和css后我們也可以做到再web頁面使用小圖標，但是一般我們要實現(xiàn)這樣的小圖標都是用圖片去使用的，那么有沒有什么更高級的方法呢（或者說，互聯(lián)網(wǎng)大廠們他們是怎么做的呢）？接下來這篇文章告訴你。

先來看看我們說的小圖標究竟是什么

小圖標

以該頁面為例，紅色方框所標注的應該是一個類似列表項的按鈕，但實際上css提供的列表項并沒有這樣的形狀（也不能給其指定顏色），其實這就是一個小圖標。

藍色方框（左邊）標注的是一個按鈕的小圖標，這樣的圖標很常見，比如收縮框的放大鏡，購物車的購物車圖標等等，這些其實也是一個小圖標。

藍色方框（右邊）標注的是一個小的角標，這樣的角標很常見，比如上面的暑期大促，還有一些new，hot等小角標都是比較常見的，這些也是一種圖標。

如何實現(xiàn)（最基本的方式）？

角標的實現(xiàn)可以直接使用定位去將角標定位到右上角，不過這樣的方式并不好看（而且角標內(nèi)的字體可能是特殊定制過的藝術字）。

另外兩種圖標本質(zhì)上是一張圖片，也是利用將圖片絕對定位到相應的地方就可以實現(xiàn)了（也可以使用background屬性去實現(xiàn)，這種方法更好（因為減少了html標簽））

 最基本的實現(xiàn)方式只要學習了HTML與CSS就會操作，所以小編就放源代碼了（如果連最基本的方式都不會，建議先前往W3Cschool學習相關的前端知識吧）

進階版（使用雪碧圖）

在基礎方式上你會發(fā)現(xiàn)一個頁面要用到的圖片實在是太多了，加載這些圖片需要與瀏覽器進行很多·次的請求。這時侯出現(xiàn)了一種新的技術（其實只是對原有技術的更好的使用）。就是雪碧圖，雪碧圖的精髓就是將這些小圖標合在一張圖片中，在請求數(shù)據(jù)的時候就避免了多次請求。這樣在早期有助于降低帶寬和服務器的壓力，同時也對渲染有所幫助（一次獲取全部小圖標進行渲染）（上述的三種小圖標統(tǒng)統(tǒng)都可以用雪碧圖實現(xiàn)）。

雪碧圖

這是一張雪碧圖，在調(diào)用圖的時候本質(zhì)上還是使用background屬性去進行圖片的切割和定位。源代碼如下（相關css為了展示方便卸載了style標簽中）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg-icon_diamond{width: 34px; height: 32px;background: url('css_sprites.png') -10px -10px;}
        .bg-icon_fire{width: 30px; height: 36px;background: url('css_sprites.png') -118px -10px;}
        .bg-icon_bag {width: 28px; height: 34px;background: url('css_sprites.png') -168px -10px;}
        .bg-icon_game {width: 34px; height: 32px;background: url('css_sprites.png') -64px -10px;}
        .bg-icon_person {width: 32px; height: 34px;background: url('css_sprites.png') -10px -62px;}
        .bg-icon_time {width: 32px; height: 32px;background: url('css_sprites.png') -62px -62px;}
    </style>
</head>
<body>
    <div class="bg-icon_diamond"></div>
    <div class="bg-icon_fire"></div>
    <div class="bg-icon_bag"></div>
    <div class="bg-icon_game"></div>
    <div class="bg-icon_person"></div>
    <div class="bg-icon_time"></div>
</body>
</html>

這樣我們就可以用class來指定小圖標了（記住這種操作，后面還會提到）。

第三種方法（使用CSS字體）

首先我們先介紹一個網(wǎng)站：https://www.iconfont.cn/這是阿里巴巴的矢量圖標庫，我們可以在上面選擇自己需要的矢量圖標庫進行選擇，放入收藏夾后可以選擇下載，下載后解壓就會得到一個如下文件夾：

字體解壓文件夾

點擊?demo_index.html?，就可以進入到示例的代碼，它介紹了這個css字體的三種使用方式（但都是使用字體的方式）。這三種使用方式的具體操作方式和優(yōu)缺點以及實例代碼該頁面都寫的很清楚了小編就不再多介紹了。

樣例介紹

對于三種圖標引入方式的選擇

我們上面提到的角標，在第三種方法中不能使用（除非自己封裝字體庫），而使用第一種方式又太占用帶寬和性能，所以一般來說角標都是使用雪碧圖方式來實現(xiàn)的。有些logo和圖標整個頁面只使用一次，或者沒有必要封裝成雪碧圖，這時候就可以采用第一種方式進行圖標引入了。小圖標方面，如果能在iconfont中找到自己所有需要的圖標，那么使用這種方式會比雪碧圖更輕松（指實現(xiàn)代碼比較清楚），但是如果害怕版權問題，或者找不到你需要的圖標，你可能需要自己封裝字體庫或者使用雪碧圖。

小結

以上就是web頁面使用圖標的三種方式的介紹，更多前端開發(fā)小技巧請關注W3Cschool！


HTML CSS

0 人點贊