详解Foundation 图标

Foundation 是一个适用于任何设备、媒介和可访问性的框架。Foundation 是一个响应式前端框架系列，它可以让你轻松设计出漂亮的响应式网站、应用程序和电子邮件，在任何设备上看起来都非常漂亮。Foundation 具有语义性、可读性、灵活性和完全可定制性。

图标语法

创建图标语法格式如下:

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

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

"stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">

Icon 实例

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

实例

Cloud icon: 
Cloud icon as a link:
"#">

Styled Cloud icon: "font-size:35px;color:red;">
Home icon: 
Home icon on a button:
type="button">
Home


Home icon on a green button:
type="button" class="button success">
 Home


Home icon on a large, light blue link button:
"#" class="button info large">
 Home

工具条图标

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

实例

"icon-bar five-up">
 "#">
   
 
 "#">
   
 
 "#">
   
 
 "#">
   
 "#">
   
 

图标描述使用 元素:

实例

"icon-bar five-up">  "#">    
Home    "#">    
Share    "#">    
Info    "#">    
Mail
  "#">    
Search  

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

实例

"#" class="item disabled">  

"#" class="item disabled">    

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

实例

"icon-bar vertical five-up">
 ....

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”，或扫描下方二维码进行关注，更多干货等着你 ！