HTML/CSS 中 LI 工具栏中的自定义图像

Question

所以我一直试图让我的自定义图像出现在垂直工具栏中，但我遇到了麻烦。我引用了http://codepen.io/nikhil/pen/sicrK，它包含所有源代码；我想要几乎相同的工具栏，但带有自定义图像。这是一个 sn-p，来自我一直在尝试调整以使其正常工作的部分：

来自 HTML：

<ul class="menu">
  <li title="home"><a href="#" class="menu-button home">menu</a></li>  
  <li title="search"><a href="#" class="search">search</a></li>
  <li title="pencil"><a href="#" class="pencil">pencil</a></li>
<ul>

来自 CSS - 之前（有效，如链接中所示）：

.menu li a.search:before {
  content: "\f002";
}

来自 CSS - 我尝试修改（不起作用；没有图像出现）

.menu li a.search:before {
  list-style-image: "\newImage.png";
}

所以，我尝试使用list-style-image，但不会出现图像。我在文件夹中引用的图像是 100x100px。我尝试了background-image，并且只在 HTML 标记中使用了<img src="newImage.png">，但没有骰子 - 没有图像出现，控制台中也没有记录错误。我该如何解决这个问题？工具栏根据屏幕大小根据 CSS 重新调整大小，所以我认为这意味着我的图像大小并不重要。或者，我是否需要改用SVG？感谢您的帮助 - 我是使用 CSS 的新手。

Answer 1

你误解了Icon Fonts的概念。

如果您想在伪元素中显示图像，那么您应该使用background 属性，就像使用任何其他元素一样。查看更多Using :before CSS pseudo element to add image to modal

请看我的sn-p：

$(document).ready(function() {
  $(".menu-button").click(function() {
    $(".menu-bar").toggleClass("open");
  })
})

.menu,
.menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  z-index: 10;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li a {
  display: block;
  text-indent: -500em;
  height: 5em;
  width: 5em;
  line-height: 5em;
  text-align: center;
  color: #72739f;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}
.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4em;
}
.menu li a.search:before {
  content: '';
  background: url("http://piq.codeus.net/static/media/userpics/piq_162172_400x400.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* content: "\f002"; */
}
.menu li a.archive:before {
  content: '';
  background: url("http://i.imgur.com/HsZNOfb.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* content: "\f187"; */
}
.menu li a.pencil:before {
content: '';
  background: url("http://thepunkeffect.com/wp-content/uploads/2013/11/01-03.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* content: "\f040"; */
}
.menu li a.contact:before {
  content: "\f003";
}
.menu li a.about:before {
  content: "\f007";
}
.menu li a.home:before {
  content: "\f039";
}
.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
  background: #267fdd;
  color: #fff;
}
.menu-bar {
  overflow: hidden;
  left: 5em;
  z-index: 5;
  width: 0;
  height: 0;
  transition: all 0.1s ease-in-out;
}
.menu-bar li a {
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  color: #72739f;
  text-decoration: none;
  position: relative;
  font-family: verdana;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}
.menu-bar li:first-child a {
  height: 5em;
  background: #267fdd;
  color: #fff;
  line-height: 5
}
.para {
  color: #033f72;
  padding-left: 100px;
  font-size: 3em;
  margin-bottom: 20px;
}
.open {
  width: 10em;
  height: 100%;
}
@media all and (max-width: 500px) {
  .container {
    margin-top: 100px;
  }
  .menu {
    height: 5em;
    width: 100%;
  }
  .menu li {
    display: inline-block;
    float: left;
  }
  .menu-bar li a {
    width: 100%;
  }
  .menu-bar {
    width: 100%;
    left: 0;
    height: 0;
  }
  .open {
    width: 100%;
    height: auto;
  }
  .para {
    padding-left: 5px;
  }
}
@media screen and (max-height: 34em) {
  .menu li,
  .menu-bar {
    font-size: 70%;
  }
}
@media screen and (max-height: 34em) and (max-width: 500px) {
  .menu {
    height: 3.5em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<ul class="menu">

  <li title="home"><a href="#" class="menu-button home">menu</a>
  </li>

  <li title="search"><a href="#" class="search">search</a>
  </li>
  <li title="pencil"><a href="#" class="pencil">pencil</a>
  </li>
  <li title="about"><a href="#" class="active about">about</a>
  </li>
  <li title="archive"><a href="#" class="archive">archive</a>
  </li>
  <li title="contact"><a href="#" class="contact">contact</a>
  </li>
</ul>

<ul class="menu-bar">
  <li><a href="#" class="menu-button">Menu</a>
  </li>
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Profile</a>
  </li>
  <li><a href="#">Editorial</a>
  </li>
  <li><a href="#">About</a>
  </li>
</ul>