草庐IT

Foundation 图标

runoob 2023-04-06 原文

Foundation 图标

Foundation 提供了 283 个图标,你可以使用css来定义它的样式尺寸。

图标可用于文本,按钮,工具条,导航栏,表单等。

以下是 Foundation 图标的实例:

刷新按钮:

检测图标:

主页图标:


图标语法

创建图标语法格式如下:

<i class="fi-name"></i>

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

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

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

Icon 实例

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

实例

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

尝试一下 »

工具条图标

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

实例

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

尝试一下 »

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

实例

<div class="icon-bar five-up">
  <a href="#" class="item">
    <i class="fi-home"></i>
    <label>Home</label>
  </a>
  <a href="#" class="item">
    <i class="fi-share"></i>
    <label>Share</label>
  </a>
  <a href="#" class="item">
    <i class="fi-info"></i>
    <label>Info</label>
  </a>
  <a href="#" class="item">
    <i class="fi-mail"></i>
    <label>Mail</label>
  </a>
  <a href="#" class="item">
    <i class="fi-magnifying-glass"></i>
    <label>Search</label>
  </a>
</div>
尝试一下 »

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

实例

<a href="#" class="item disabled">
  <i class="fi-share"></i>
</a>

<a href="#" class="item disabled">
    <i class="fi-mail"></i>
</a>

尝试一下 »

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

实例

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

尝试一下 »

Foundation 图标参考手册

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

有关Foundation 图标的更多相关文章

  1. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下,分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  2. ruby-on-rails - 如何检索网站图标? - 2

    我正在使用RubyonRailsv3.0.9,我想检索我设置了链接的每个网站的favicon.ico图像。也就是说,如果在我的应用程序中我设置了http://www.facebook.com/URL,我想检索Facebook的图标并在我的网页中使用\插入它。当然,我也想为所有其他网站这样做。如何以“自动”方式从网站检索favicon.ico图标(“自动”是指在网站中搜索图标并获取它的链接-我认为不是,因为并非所有网站都有一个名为“favicon.ico”的图标。我想以“自动”方式识别它)?P.S.:我想做的是像Facebook在您的Facebook页面中添加链接\URL时所做的那样:它

  3. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324,但这对我不起作用。我还测试了BootstrapCSS是否正常工作,只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  4. ruby - OS X 中作为守护进程运行的脚本的菜单栏图标? - 2

    我有一个ruby​​脚本(https://github.com/daemonza/MacBak)作为守护进程在我的macbook上运行并监视一堆目录的文件更改和rsync发生的任何更改。我想知道我能否让它在顶部的菜单栏中创建一个图标?只是为了让我知道它确实在运行,而不必使用ps检查它。也许以后如果需要的话,我可能希望能够从那里控制脚本,简单的带有停止和状态条目的下拉菜单等。从ObjectC看来我可以调用NSStatusItem来获取图标,但我真的只是想通过我的Ruby脚本轻松地完成它。也许我可以做一些applescript调用? 最佳答案

  5. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性? - 2

    大家好,我正在开发一个新的Rails应用程序,我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css,还有它的视觉效果;p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的,如果您对app/assets/stylesheets/

  6. ruby-on-rails - 如何在 Ajax 请求处理期间显示动画图标 - Rails 3 - 2

    我正在尝试为每个ajax请求显示一个加载指示器,我在Rails3应用程序中工作。HTML:"loading-indicator",:style=>"display:none")%>CSS:#loading-indicator{position:absolute;left:10px;top:10px;}loading.js:我放在assest/javascripts/$(document).ready(function(){$(document).ajaxSend(function(event,request,settings){$('#loading-indicator').show(

  7. ruby - 证书验证在 "gem install foundation"中失败 - 2

    在安装nodejs、ruby、gitplusbower后尝试安装Foundation。我不断收到以下错误,但我不知道如何解决:找不到有效的gem'foundation'(>=0),原因如下:无法从https://rubygems.org/下载数据-SSL_connectreturned=1errno=0state=SSLv3readservercertificateB:certificateverifyfailed(https://api.rubygems.org/latest_specs.4.8.gz)有什么想法吗? 最佳答案 如

  8. javascript - 当 Django Admin 弹出窗口(绿色加号图标)完成时,是否有事件或其他方式调用 Javascript 函数? - 2

    假设我们有那些Django模型:classBand(models.Model):name=models.CharField(max_length=256,default="EaglesofDeathMetal")classSong(models.Model):band=models.ForeignKey(Band)当使用admin管理这些模型时,band字段关联到由Django呈现为selecthtml元素的Widget。Django的管理员还在select旁边添加了一个绿色加号图标,单击它会打开一个弹出窗口,用户会在其中看到Form添加一个新的乐队。单击此弹出窗口中的save按钮时,

  9. javascript - 如何使用 Font Awesome 作为传单中的图标而不是标记 - 2

    在此代码中,我使用data[key].category来指示相关图标作为标记。但我想用超赞的字体图标替换它,使其在运行时轻量级,在某些地方可能会加载数十个图标作为标记varCofee=Leaflet.icon({iconUrl:'/img/Coffee.png',shadowUrl:'/img/pale-shadow.png',iconSize:[34,49],shadowSize:[49,49],iconAnchor:[5,62],shadowAnchor:[4,62],popupAnchor:[12,-30]});varStore=Leaflet.icon({iconUrl:'/i

  10. javascript - Raphael js 如何在每个站点包含多个图标?使用类而不是 ID - 2

    我如何在一个站点上包含来自Raphaël(http://raphaeljs.com/icons/)的多个图标?我还没有设法通过class="icon"包含它们,只是使用id="icon"。因为我的JavaScript不是很好,所以我在网上搜索但一无所获。我在博客上唯一找到的东西:bubble:"M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.

随机推荐