良许Linux教程网 干货合集 详解Foundation 图标

详解Foundation 图标

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

img

图标语法

创建图标语法格式如下:


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:

Home icon on a green button:

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

工具条图标

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

实例


图标描述使用 元素:

实例


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

实例

"#" class="item disabled">  

"#" class="item disabled">    

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

实例

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

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

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
x
x