Css 用不同类别的图像替换列表项目符号

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

有人能给我一个这样的例子，我可以实现我的网站吗？谢谢大家!

视图：

---

您可以使用

列表样式类型：none

禁用项目符号，然后在列表项上使用

背景图像

css样式，或者在列表项中包含一个显示图标的范围（或其他元素）

大概是这样的：

li{
列表样式类型：无；
}
.图标播放，
.图标吃
{
高度：20px；
宽度：20px；
显示：内联块；
背景重复：无；
}
.图标播放
{
背景色：#f08080；
/*在这里使用背景图像*/
}
.图标吃
{
背景色：#80f080；
/*在这里使用背景图像*/
}

我们来玩吧
我们吃吧

您可以使用

列表样式类型：none

禁用项目符号，然后在列表项上使用

背景图像

css样式，或者在列表项中包含一个span（或其他元素），该span将显示图标

大概是这样的：

li{
列表样式类型：无；
}
.图标播放，
.图标吃
{
高度：20px；
宽度：20px；
显示：内联块；
背景重复：无；
}
.图标播放
{
背景色：#f08080；
/*在这里使用背景图像*/
}
.图标吃
{
背景色：#80f080；
/*在这里使用背景图像*/
}

我们来玩吧
我们吃吧

改用背景图像…发布的代码不是HTML，与问题没有明显的相关性。改用背景图像…发布的代码不是HTML，与问题没有明显的相关性。好的，谢谢你的提示。我必须找出如何告诉它，以检测要为特定类别显示的图标。您还可以将此应用于伪元素

Let's eat

和CSS

li:before{content:''；display:inline block；width:5px；height:5px；}。image eat:before{background:url（）；}

我用当前代码编辑了原始帖子。我想我需要创建一个助手方法，将标签上的字符串映射到正确的CSS类。如果你能告诉我我应该如何调整你的CSS例子，以适应吗？好的，谢谢你的提示。我必须找出如何告诉它，以检测要为特定类别显示的图标。您还可以将此应用于伪元素

Let's eat

和CSS

li:before{content:''；display:inline block；width:5px；height:5px；}。image eat:before{background:url（）；}

我用当前代码编辑了原始帖子。我想我需要创建一个助手方法，将标签上的字符串映射到正确的CSS类。如果你能告诉我，我应该如何调整你的CSS的例子，以适应？

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

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