Icône de la Fondation


Foundation fournit 283 icônes et vous pouvez utiliser CSS pour définir son style et sa taille.

Les icônes peuvent être utilisées pour le texte, les boutons, les barres d'outils, les barres de navigation, les formulaires, etc.

Syntaxe des icônes

Créer une syntaxe d'icône Le format est le suivant :

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

nom est remplacé avec le nom de l'icône.

Pour utiliser des icônes, nous devons ajouter le fichier de style de l'icône dans la section <head> :

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

Instance d'icône

Ce qui suit montre un exemple d'utilisation de l'icône :

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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Icône de barre d'outils

Nous pouvons utiliser la classe .icon-bar pour créer un nombre spécifié d'icônes de barre d'outils :

Instances

<!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>

Exécution d'instances»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

La description de l'icône utilise l'élément <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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

.disabled la classe peut rendre l'icône non cliquable :

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>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'instance en ligne

.vertical Classe utilisée pour créer une barre d'outils verticale :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » » pour afficher des exemples en ligne

Manuel de référence des icônes Foundation

Pour plus d'informations sur les icônes, vous pouvez vous référer à notre manuel des icônes de la Fondation.