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:

<i class="fi-name"></i>

nama diganti dengan nama ikon.

Untuk menggunakan ikon kita perlu menambah fail gaya ikon dalam bahagian <head>:

<link rel="stylesheet" href="../ style/css/ foundation-icons.css">

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.