Cara menggunakan ikon fon css

Dalam css, selepas memperkenalkan fon dan fail style.css, anda boleh menggunakan teg sebaris untuk menambah ikon fon Format sintaks ialah "1cc2afa540da112ef90ce178dca8b684". Warna dan saiz ikon fon boleh diubah suai melalui css yang sepadan dengan fail yang agak kecil, yang membantu halaman mengurangkan permintaan http.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Jana dalam talian

Jana melalui tapak web https://icomoon.io/app/#/select. Sudah tentu terdapat laman web lain yang serupa, tetapi yang ini benar-benar hebat, hebat, hebat, tiga kali ganda.

Import semua ikon dalam format SVG, pilih kesemuanya dan klik GenerateFont untuk menjana ikon fon yang sepadan. Kemudian muat turun semua fail yang telah dibungkus. Struktur direktori fail pakej yang dimuat turun adalah seperti yang ditunjukkan di atas Kami hanya perlu memperkenalkan fon dan fail style.css. Fail fon adalah seperti berikut: perpustakaan fon termampat eot, ikon svg bersepadu, fon ttf dan format fon woff.

style.css mengandungi pengenalan fail fon dan gaya ikon yang sepadan.

Kami boleh mengubah suai helaian gaya di atas untuk mencapai kesan terbaik paparan halaman kami sendiri.

Apakah ikon yang diperlukan? Kita hanya perlu menambah kelas yang sepadan pada teg sebaris (span, i, em).

Ringkasan

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?n54c0o');
    src:    url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?n54c0o') format('truetype'),
        url('fonts/icomoon.woff?n54c0o') format('woff'),
        url('fonts/icomoon.svg?n54c0o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE900:before {
    content: "\e900";
}
.icon-uniE901:before {
    content: "\e901";
}
.icon-uniE902:before {
    content: "\e902";
}
.icon-uniE903:before {
    content: "\e903";
}
.icon-uniE904:before {
    content: "\e904";
}
.icon-uniE905:before {
    content: "\e905";
}

Memang sangat mudah untuk menggunakan ikon fon, dan warna serta saiz boleh diubah suai melalui css yang sepadan. Selain itu, fail itu agak kecil, yang bermanfaat untuk memuatkan halaman dan mengurangkan permintaan http.

<span class="icon-uniE901"></span>

Tetapi jika fail ikon fon telah dihasilkan dan kami mempunyai ikon baharu untuk ditambah, maka kami perlu menjana semula fail fon yang sepadan dan mengubah suai fail css. Penyelesaiannya adalah untuk menambah semua ikon yang digunakan sebanyak mungkin sebelum menjana, atau menggunakan perpustakaan ikon fon pihak ketiga.

Pembelajaran yang disyorkan: tutorial video css

Atas ialah kandungan terperinci Cara menggunakan ikon fon css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!