Rumah > Artikel > hujung hadapan web > Tetapkan saiz ikon dalam HTML
Tetapkan saiz ikon dalam HTML
- 王林ke hadapan
- 2023-09-03 11:29:061734semak imbas
Dalam artikel ini, kita akan membincangkan cara menetapkan saiz ikon dalam HTML.
Ikon ialah simbol yang mewakili tindakan tertentu pada halaman web. Fon Ikon mengandungi simbol dan glif. Terdapat beberapa perpustakaan ikon (fon) yang menyediakan ikon dan boleh digunakan pada halaman web HTML.
Fon ikon terkenal yang sering digunakan oleh pembangun web ialah Fon Hebat, Bootstrap Glyphicons dan Ikon Bahan Google我>.
Font Awesome - Perpustakaan ini adalah percuma untuk kegunaan komersial dan peribadi. Fon ini memberi kami 519 ikon vektor boleh skala percuma. Ini boleh disesuaikan dengan mudah dan pada asalnya dibangunkan dengan Bootstrap.
Bootstrap Glyphicons - Ini ialah perpustakaan ikon monokrom yang tersedia untuk format imej raster, format imej vektor dan fon. Ia menyediakan lebih 250 glyph dalam format fon. Anda boleh menggunakan fon ini dalam projek web, tetapi ia tidak percuma.
Ikon Bahan oleh Google - Google telah mereka 750 ikon di bawah "Garis Panduan Reka Bentuk Bahan" yang disediakan sebagai satu set, ikon ini dipanggil Ikon Reka Bentuk Bahan. Hampir semua pelayar web menyokong ikon ini. Untuk menggunakan ikon ini, anda mesti memuatkan ikon bahan fon (perpustakaan).
Mari gunakan perpustakaan fon ikon di atas dalam contoh di bawah.
Fon Ikon Hebat
Contoh
Dalam contoh di bawah,
Mula-mula, kami memuatkan perpustakaan Font Awesome.
-
Kemudian kami menggunakan salah satu ikon dan menambah nama kelas ikon itu pada elemen HTML di dalam teg
. Kami kemudiannya meningkatkan saiz ikon dengan mentakrifkannya menggunakan CSS dan menggunakannya dengan nama kelas.
Kami telah mengisytiharkan saiz sebagai 100px.
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.size {
font-size: 100px;
}
</style>
</head>
<body>
<h2>This is a Font Awesome Icon</h2>
<p>We have set the size of this icon to 100px.</p>
<i class="fa fa-inr size"></i>
</body>
</html>
Seperti yang dapat kita lihat dalam output, kami telah menggunakan ikon mata wang India dan menentukan saiznya menggunakan CSS.
Ikon Bahan Google
Contoh
Dalam contoh di bawah,
Kami telah memuatkan perpustakaan ikon bahan.
-
Kemudian kami menggunakan salah satu ikon dan menambah nama kelas ikon itu pada elemen HTML di dalam teg
. Kami menggunakan ikon bernama trafik kerana ia tergolong dalam kategori Tindakan.
Kami kemudiannya meningkatkan saiz ikon dengan mentakrifkannya menggunakan CSS dan menggunakannya dengan nama kelas.
<!DOCTYPE html>
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
i.size {
font-size: 150px;
}
</style>
</head>
<body>
<h2>This is a Google Material Icon</h2>
<p>We have set the size of this icon to 150px.</p>
<i class="material-icons size">traffic</i>
</body>
</html>
Seperti yang dapat kita lihat dalam output, kami telah menggunakan ikon lampu isyarat dan menentukan saiznya menggunakan CSS.
Glyph Panduan
Contoh
Dalam contoh di bawah,
Mula-mula, kami memuatkan perpustakaan Bootstrap Glyphicons.
-
Kemudian kami menggunakan salah satu ikon dan menambah nama kelas ikon itu pada elemen HTML di dalam teg
. Dalam contoh kita menggunakan ikon bernama tree dengan nama kelas tree-decidious.
<!DOCTYPE html>
<html>
<head>
<title>Set the size of the icons in HTML</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
i.mysize {
font-size: 100px;
}
</style>
</head>
<body>
<h2>This is a Bootstrap Glyphicons Icon</h2>
<p>We have set the size of this icon to 100px.</p>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
Seperti yang dapat kita lihat dalam output, kami menggunakan ikon pokok dan menentukan saiznya menggunakan CSS.
Atas ialah kandungan terperinci Tetapkan saiz ikon dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!