html5 - Adakah logo ini dibuat menggunakan gaya CSS?

Question

Saya melihat kod sumber ikon untuk memajukan komen seperti ini. Nampaknya ia adalah gaya.

Answer 1

Iconfont melaksanakannya: http://www.iconfont.cn/

Answer 2

Cari tapak web ini untuk ikon, dan kemudian hasilkan fail css Hanya petikan apabila anda menggunakannya

Answer 3

Malah, iconfont digunakan
Tetapkan fon yang tidak tersedia dalam sistem penyemak imbas pada halaman web
Pelayar memuat turun fail fon dan memaparkannya dengan fon yang sepadan

Fon yang dipanggil ialah grafik yang sepadan dengan pengekodan aksara
Sebagai contoh, ikon telefon di bawah sebenarnya adalah perkataan
Anda boleh memilih untuk menyalin dan menampal
Tetapi bergantung pada persekitaran, fon yang sepadan adalah berbeza
Borang paparan mungkin berbeza
Dalam kes yang paling teruk, ia mungkin ditetapkan Jika tiada grafik yang sepadan dengan pengekodan ini dalam fon, ia tidak akan dipaparkan.
☎

Untuk butiran, sila lihat penggunaan iconfont

Kelebihan ini jelas, fonnya juga teks, dan saiz fon, warna dan hiasan boleh ditetapkan mengikut elemen teks lain tanpa herotan skala

Kelemahannya juga jelas, ia bukan gambar, jadi ikon berwarna-warni seperti gambar tidak dapat direalisasikan

Answer 4

Ia dilaksanakan menggunakan ikon Yang disiarkan di atas hanyalah tapak web.
1 Mula-mula pilih ikon di laman web dan simpan dalam projek, kemudian muat turun secara setempat (anda juga boleh menggunakan pautan dalam talian di sini, gambar di bawah menunjukkan dua kaedah operasi, juga dalam ikonfont)

Perkenalkan pautan tempatan atau dalam talian dalam 2.css (gambar di atas), kaedah tempatan adalah sama.

3 Tentukan keluarga fon sebagai ikon dalam gaya yang akan digunakan dan gunakan kod ikon, seperti memuatkan semula ikon pertama dalam perjalanan

.

.myIcon{
    font-family: icon;
}
<span class="myIcon">&#xe6d6;<icon>

Answer 5

Hujung hadapan benar-benar seperti Lapan Abadi yang menyeberangi laut, masing-masing menunjukkan kuasa ajaib mereka Selain ikon, ia juga boleh melakukan base64, svg dan juga kanvas

Answer 6

Cara paling mudah ialah menggunakan bootstrap
http://v3.bootcss.com/compone...
pautan memperkenalkan bootstrap, dan kemudian hanya tambahkan nama kelas terus pada label
<button class="btn btn-default "> Skrin penuh<span class="glyphicon glyphicon-fullscreen"></span></button>