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>
    2. 




复制



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



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




    

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




复制



Icon 实例



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





实例




    

  1. 
<p>Cloud icon: <i class="fi-cloud"></i></p> 
    2. 

  2. 
<p>Cloud icon as a link:
    3. 

  3. 
  <a href="#"><i class="fi-cloud"></i></a>
    4. 

  4. 
</p>
    5. 

  5. 
<p>Styled Cloud icon: <i class="fi-cloud" style="font-size:35px;color:red;"></i></p> 
    6. 

  6. 
<p>Home icon: <i class="fi-home"></i></p>
    7. 

  7. 
<p>Home icon on a button:
    8. 

  8. 
  <button type="button" class="button">
    9. 

  9. 
    <i class="fi-home"></i> Home 
    10. 

  10. 
  </button>
    11. 

  11. 
</p>
    12. 

  12. 
<p>Home icon on a green button:
    13. 

  13. 
  <button type="button" class="button success">
    14. 

  14. 
    <i class="fi-home"></i> Home 
    15. 

  15. 
  </button>
    16. 

  16. 
</p>
    17. 

  17. 
<p>Home icon on a large, light blue link button:
    18. 

  18. 
  <a href="#" class="button info large">
    19. 

  19. 
    <i class="fi-home"></i> Home 
    20. 

  20. 
  </a>
    21. 

  21. 
</p>
    22. 




复制

实例预览 »



工具条图标



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





实例




    

  1. 
 <div class="icon-bar five-up">
    2. 

  2. 
  <a href="#" class="item">
    3. 

  3. 
    <i class="fi-home"></i>
    4. 

  4. 
  </a>
    5. 

  5. 
  <a href="#" class="item">
    6. 

  6. 
    <i class="fi-bookmark"></i>
    7. 

  7. 
  </a>
    8. 

  8. 
  <a href="#" class="item">
    9. 

  9. 
    <i class="fi-info"></i>
    10. 

  10. 
  </a>
    11. 

  11. 
  <a href="#" class="item">
    12. 

  12. 
    <i class="fi-mail"></i>
    13. 

  13. 
  </a>
    14. 

  14. 
  <a href="#" class="item">
    15. 

  15. 
    <i class="fi-like"></i>
    16. 

  16. 
  </a>
    17. 

  17. 
</div>
    18. 




复制

实例预览 »



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





实例




    

  1. 
 <div class="icon-bar five-up">
    2. 

  2. 
  <a href="#" class="item">
    3. 

  3. 
    <i class="fi-home"></i>
    4. 

  4. 
    <label>Home</label>
    5. 

  5. 
  </a>
    6. 

  6. 
  <a href="#" class="item">
    7. 

  7. 
    <i class="fi-share"></i>
    8. 

  8. 
    <label>Share</label>
    9. 

  9. 
  </a>
    10. 

  10. 
  <a href="#" class="item">
    11. 

  11. 
    <i class="fi-info"></i>
    12. 

  12. 
    <label>Info</label>
    13. 

  13. 
  </a>
    14. 

  14. 
  <a href="#" class="item">
    15. 

  15. 
    <i class="fi-mail"></i>
    16. 

  16. 
    <label>Mail</label>
    17. 

  17. 
  </a>
    18. 

  18. 
  <a href="#" class="item">
    19. 

  19. 
    <i class="fi-magnifying-glass"></i>
    20. 

  20. 
    <label>Search</label>
    21. 

  21. 
  </a>
    22. 

  22. 
</div>
    23. 




复制

实例预览 »



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





实例




    

  1. 
<a href="#" class="item disabled">
    2. 

  2. 
  <i class="fi-share"></i>
    3. 

  3. 
</a>
    4. 

  4. 
 
    5. 

  5. 
<a href="#" class="item disabled">
    6. 

  6. 
    <i class="fi-mail"></i>
    7. 

  7. 
</a>
    8. 




复制





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





实例




    

  1. 
 <div class="icon-bar vertical five-up">
    2. 

  2. 
  ....
    3. 

  3. 
</div>
    4. 




复制

实例预览 »



Foundation 图标参考手册



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



 






    













相关教程