【问题标题】:What else html tag can I use for Icon? [closed]我还可以为 Icon 使用什么 html 标签? [关闭]
【发布时间】:2013-03-08 03:44:05
【问题描述】:

不幸的是,由于特定的自定义 cms,我不能使用 <SPAN><I>...所以,我想知道还有什么其他标签可以适合用于图标?

【问题讨论】:

  • 可能是img?似乎它比i 更有意义。
  • 不能与精灵一起工作,不是吗?!
  • @Alex:它可能不适用于很多你没有指定的东西。
  • 您能否详细说明它们是如何为其他事物保留的?如果您的 CMS 完全不允许使用某些流行的 HTML 元素,那么可能是时候转向不同的 CMS。
  • Span 是在这种情况下使用的完美语义标签。 HTML5 规范不包括针对无法使用某些标签的人的解决方法,因为不应该出现特定标签不可用的情况。我之前修改了我的答案,以解决您的跨度删除问题。

标签: html css semantics


【解决方案1】:

对于初学者来说,<i> 并不适合作为图标,因为i 表示alternative voice or mood。然而,这可能取决于图标的使用位置和方式。

如果图标是基于字体的,<span> 会更合适。

如果图标是基于图像的,<img> 会更合适。

听起来您的问题可能与围绕 ispan 标记的预先存在的 CSS 规则有关。您可以简单地覆盖它们:

span {
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    /* etc... */
}

从 cmets 编辑:

为了防止 CMS 删除 empty span 标签,只需给它一些内容:

<span class="icon">&nbsp;</span>

&amp;nbsp; 不应超过图标的高度或宽度,因此不会影响样式。

【讨论】:

  • 从技术上讲,您对 的看法是正确的,但像 Bootstrap 这样的框架将它用于他们的图标 Bootstrap Icons
  • 不,问题是我不能使用 SPAN 或 I 标签...它们是为其他东西保留的。所以,我想使用另一个,例如 EM..跨度>
  • @Poz 这并不意味着它们是正确的。
  • @Alex &lt;em&gt; 用于emphasised textspan 最适合作为“the span element doesn't mean anything on its own”。
  • @Alex 这听起来更像是一个 CMS 错误。 CMS 不应有意删除空元素,无论它们是什么。你总是可以&lt;span class="icon"&gt;&amp;nbsp;&lt;/span&gt;
【解决方案2】:

如果你在谈论使用背景图片,我总是使用好的 ol'div,因为你不太可能有任何 css 冲突

【讨论】:

  • div 是一个分段元素而不是文本级语义,因此使用spanimg。图标不应该是真正的背景图像,因为它们是前景设计元素。
猜你喜欢
  • 1970-01-01
  • 2022-09-28
  • 2014-07-16
  • 2010-09-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-09
相关资源
最近更新 更多