VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • HTML5 教程之Foundation 图标

Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。

图标可用于文本,按钮,工具条,导航栏,表单等。

图标语法

创建图标语法格式如下:


  1. <i class="fi-name"></i>
复制

name 部分替换为图标的名字。

要使用图标我们需要在 <head> 部分添加图标的样式文件:


  1. <link rel="stylesheet" href="http://static.shouce.ren/assets/foundation-icons/foundation-icons.css">
复制

Icon 实例

以下演示了使用图标的实例:

实例


	
  1. <p>Cloud icon: <i class="fi-cloud"></i></p> 
  2. <p>Cloud icon as a link:
  3.   <a href="#"><i class="fi-cloud"></i></a>
  4. </p>
  5. <p>Styled Cloud icon: <i class="fi-cloud" style="font-size:35px;color:red;"></i></p> 
  6. <p>Home icon: <i class="fi-home"></i></p>
  7. <p>Home icon on a button:
  8.   <button type="button" class="button">
  9.     <i class="fi-home"></i> Home 
  10.   </button>
  11. </p>
  12. <p>Home icon on a green button:
  13.   <button type="button" class="button success">
  14.     <i class="fi-home"></i> Home 
  15.   </button>
  16. </p>
  17. <p>Home icon on a large, light blue link button:
  18.   <a href="#" class="button info large">
  19.     <i class="fi-home"></i> Home 
  20.   </a>
  21. </p>
复制
实例预览 »

工具条图标

我们可以使用 .icon-bar 类来创建一个指定数量的工具栏图标:

实例


	
  1.  <div class="icon-bar five-up">
  2.   <a href="#" class="item">
  3.     <i class="fi-home"></i>
  4.   </a>
  5.   <a href="#" class="item">
  6.     <i class="fi-bookmark"></i>
  7.   </a>
  8.   <a href="#" class="item">
  9.     <i class="fi-info"></i>
  10.   </a>
  11.   <a href="#" class="item">
  12.     <i class="fi-mail"></i>
  13.   </a>
  14.   <a href="#" class="item">
  15.     <i class="fi-like"></i>
  16.   </a>
  17. </div>
复制
实例预览 »

图标描述使用 <label> 元素:

实例


	
  1.  <div class="icon-bar five-up">
  2.   <a href="#" class="item">
  3.     <i class="fi-home"></i>
  4.     <label>Home</label>
  5.   </a>
  6.   <a href="#" class="item">
  7.     <i class="fi-share"></i>
  8.     <label>Share</label>
  9.   </a>
  10.   <a href="#" class="item">
  11.     <i class="fi-info"></i>
  12.     <label>Info</label>
  13.   </a>
  14.   <a href="#" class="item">
  15.     <i class="fi-mail"></i>
  16.     <label>Mail</label>
  17.   </a>
  18.   <a href="#" class="item">
  19.     <i class="fi-magnifying-glass"></i>
  20.     <label>Search</label>
  21.   </a>
  22. </div>
复制
实例预览 »

.disabled 类可以让图标变成不可点击状态:

实例


	
  1. <a href="#" class="item disabled">
  2.   <i class="fi-share"></i>
  3. </a>
  4.  
  5. <a href="#" class="item disabled">
  6.     <i class="fi-mail"></i>
  7. </a>
复制

.vertical 类用于创建一个垂直的工具栏:

实例


	
  1.  <div class="icon-bar vertical five-up">
  2.   ....
  3. </div>
复制
实例预览 »

Foundation 图标参考手册

更多关于图标的内容,可以参考我们的Foundation 图标手册。

 

相关教程