8.7. Foundation icon

发布时间 ： 2025-10-25 13:33:55 UTC      

Page Views: 9 views

Foundation provides 283 icons, and you can use css to define its style dimensions.

Icons can be used for text, buttons, sidebars, navigation bars, forms, etc.

The following is an example of the Foundation icon:

Refresh button:

Test icon:

Home page icon:

8.7.1. Icon syntax

The syntax format for creating icons is as follows:

<i class="fi-name">i>    
  name  Partially replace with the name of the icon. 
 
 To use icons, we need to add a style file for icons in the < head > section: 
 
 
 
<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css"> 
 
 
  
 
  8.7.2.  Icon instance  
 
 The following shows an example of using icons: 
 
 
 Example  
 
 
 
<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>    
  尝试一下 »  
   
 
  8.7.3.  Toolbar icon  
 
 We can use it.   .icon-bar   Class to create a specified number of toolbar icons: 
 
 
 Example  
 
 
 
<div class="icon-bar five-up"> <a href="#" class="item"> <i class="fi-home">i> a> <a href="#" class="item"> <i class="fi-bookmark">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-like">i> a> div>    
  尝试一下 »  
 
 The icon describes the use of   
 
 Example  
 
 
 
<div class="icon-bar five-up"> <a href="#" class="item"> <i class="fi-home">i> <label>Homelabel> a> <a href="#" class="item"> <i class="fi-share">i> <label>Sharelabel> a> <a href="#" class="item"> <i class="fi-info">i> <label>Infolabel> a> <a href="#" class="item"> <i class="fi-mail">i> <label>Maillabel> a> <a href="#" class="item"> <i class="fi-magnifying-glass">i> <label>Searchlabel> a> div>    
  尝试一下 »  
 
   .disabled   Class can make the icon unclickable: 
  
 
 Example  
 
 
 
<a href="#" class="item disabled"> <i class="fi-share">i> a> <a href="#" class="item disabled"> <i class="fi-mail">i> a>    
  尝试一下 »  
 
   .vertical   Class is used to create a vertical toolbar: 
  
 
 Example  
 
 
 
<div class="icon-bar vertical five-up"> .... div>    
  尝试一下 »  
   
 
  8.7.4.  Foundation Icon reference Manual  
 
 For more information about icons, please refer to our  Foundation 图标手册。  
 
  
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            8.7. Foundation icon 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289