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

Question

我一直在<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

Answer 1

您可以使用list-style-type: none css规则禁用项目符号,然后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;
}