css - 用不同类别的图像替换列表元素符号

<分区>

我一直在使用列表元素符号 <li>对于我的网站。我有几个图标，想知道如何使用图像代替内容特定标签/类别的元素符号？我有一个部分，用户可以在其中发布几个不同类别的内容——吃/喝、玩、其他、听/看和探索。我想在显示内容时为每个特定类别显示一个图标。

有人可以给我一个这样的例子，以便我可以在我的网站上实现吗？谢谢!

查看:

<% for letsgo in @letsgos %>

  <li>
    <%= letsgo_icon(letsgo) %>
    <b>Let's Go...<span class="content"><%= letsgo.content %></span></b>
      <% if current_user?(letsgo.user) %>
        <%= link_to "delete", letsgo, method: :delete, data: { confirm: "You sure?" }%> 
      <% end %> 
      <% unless current_user?(letsgo.user) %> 
        <%= link_to "I'm Interested", interested_letsgo_path(letsgo), method: :message %> | 
        <%= link_to "repost", repost_letsgo_path(letsgo), method: :post %>
      <% end %>

  <% end %>

</li>

Letsgohelper.rb:

module LetsgoHelper
  def letsgo_icon_class(letsgo)
    case letsgo.tag
    when "Eat/Drink"
      "fork27.png"
    when "Play"
      "play48.png"
    when "Listen/Watch"
      "entry.png"
    when "Explore"
      "binoculars18.png"
    when "Other"
      "calendar146.png"
  end
end

  def letsgo_icon(letsgo)
    content_tag(:span, "", class: letsgo_icon_class(letsgo) )
  end
end

最佳答案

您可以使用 list-style-type: none 禁用元素符号 css rule然后在列表项上使用 background-image css 样式，或者在列表项中包含一个 span(或其他元素)以显示图标。

像这样:

li {
  list-style-type: none;  
}

.icon-play,
.icon-eat
{
   height: 20px;
   width: 20px;
   display: inline-block;
   background-repeat: none;   
}

.icon-play
{
   background-color: #f08080;
   /* use a background image here */
}

.icon-eat
{
   background-color: #80f080;
   /* use a background image here */
}

<ul>
  <li><span class="icon-play"></span> Let's Play</li>
  <li><span class="icon-eat"></span> Let's Eat</li>
</ul>

CSS 规则:

li {
    list-style-type: none;
}
.icon-play {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(Img/wmd-buttons.png?v=581875b1c136);
    background-repeat: no-repeat;
}

关于css - 用不同类别的图像替换列表元素符号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27031317/

上一篇：javascript - 了解 CSS 对于 JS 开发人员有多重要？

下一篇：html - UL-LI强制间距？

相关文章：

javascript - 如何在登录表单上方显示错误的用户名和密码？

javascript - 一个真正的循环 <div> 通过 css 或 js 手段

html - FireFox 无法加载字体 404 Not Found

ruby-on-rails - Rails 3(Ruby 1.9.2 vs 1.8.6)和(MRI vs REE vs JVM)——评论/建议？

ruby-on-rails - spree 路线: Adding only the api routes

html - 如何更改网页中两个不同区域(div)的占位符文本颜色

jquery - 使 Nivo Slider 在加载时淡入

ruby-on-rails - 通过 websockets 向聊天组件(react.js)添加消息

ruby-on-rails - 在不同的 Controller 中设计表单