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 图标手册。



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程