Ikon asas
Yayasan menyediakan 283 ikon dan anda boleh menggunakan CSS untuk menentukan gaya dan saiznya.
Ikon boleh digunakan untuk teks, butang, bar alat, bar navigasi, borang, dsb.
Sintaks ikon
Buat sintaks ikon Formatnya adalah seperti berikut:
nama diganti dengan nama ikon.
Untuk menggunakan ikon kita perlu menambah fail gaya ikon dalam bahagian <head>:
Instance ikon
Yang berikut menunjukkan contoh penggunaan ikon:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-icons/foundation-icons.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div style="padding:20px;"> <h2>图标实例</h2> <p>Cloud icon: <i class="fi-cloud"></i></p> <p>Cloud icon as a link: <a href="#"><i class="fi-cloud"></i></a> </p> <p>Styled Cloud icon: <i class="fi-cloud" style="font-size:35px;color:red;"></i></p> <p>Home icon: <i class="fi-home"></i></p> <p>Home icon on a button: <button type="button" class="button"> <i class="fi-home"></i> Home </button> </p> <p>Home icon on a green button: <button type="button" class="button success"> <i class="fi-home"></i> Home </button> </p> <p>Home icon on a large, light blue link button: <a href="#" class="button info large"> <i class="fi-home"></i> Home </a> </p> </div> </body> </html>
Jalankan instance»
Klik butang "Run instance" untuk melihat instance dalam talian
Ikon bar alat
Kita boleh menggunakan kelas .icon-bar
untuk mencipta bilangan ikon bar alat yang ditentukan:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-icons/foundation-icons.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <h2>Icon Bar</h2> <div class="icon-bar five-up"> <a href="#" class="item"> <i class="fi-home"></i> </a> <a href="#" class="item"> <i class="fi-share"></i> </a> <a href="#" class="item"> <i class="fi-info"></i> </a> <a href="#" class="item"> <i class="fi-mail"></i> </a> <a href="#" class="item"> <i class="fi-magnifying-glass"></i> </a> </div> </body> </html>
Menjalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Penerangan ikon menggunakan elemen <label>
:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-icons/foundation-icons.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <h2>图标工具栏</h2> <div class="icon-bar five-up"> <a href="#" class="item"> <i class="fi-home"></i> <label>Home</label> </a> <a href="#" class="item"> <i class="fi-share"></i> <label>Share</label> </a> <a href="#" class="item"> <i class="fi-info"></i> <label>Info</label> </a> <a href="#" class="item"> <i class="fi-mail"></i> <label>Mail</label> </a> <a href="#" class="item"> <i class="fi-magnifying-glass"></i> <label>Search</label> </a> </div> </body> </html>
Jalankan instance»
Klik butang "Run instance" untuk melihat instance dalam talian
.disabled
kelas boleh membuat ikon tidak boleh diklik:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css"> <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script> <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script> </head> <body> <h2>图标工具栏</h2> <div class="icon-bar five-up"> <a href="#" class="item"> <i class="fi-home"></i> </a> <a href="#" class="item disabled"> <i class="fi-share"></i> </a> <a href="#" class="item"> <i class="fi-info"></i> </a> <a href="#" class="item disabled"> <i class="fi-mail"></i> </a> <a href="#" class="item"> <i class="fi-magnifying-glass"></i> </a> </div> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
.vertical
Kelas yang digunakan untuk mencipta bar alat menegak:
Instance
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-icons/foundation-icons.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <h2>图标工具栏</h2> <div class="icon-bar vertical five-up"> <a href="#" class="item"> <i class="fi-home"></i> </a> <a href="#" class="item"> <i class="fi-share"></i> </a> <a href="#" class="item"> <i class="fi-info"></i> </a> <a href="#" class="item"> <i class="fi-mail"></i> </a> <a href="#" class="item"> <i class="fi-magnifying-glass"></i> </a> </div> </body> </html>
Jalankan Instance»
Klik butang "Run Instance" " untuk melihat contoh dalam talian
Manual Rujukan Ikon Yayasan
Untuk maklumat lanjut tentang ikon, anda boleh rujuk Manual Ikon Yayasan kami.