html - 使用 :before 对齐图标旁边的文本

Question

我试图将我的文本与我的图标对齐，但是无论我做什么，由于某种原因它都不起作用。

我尝试摆弄 top 或 margin 但它似乎仍然不想在图标旁边对齐。有任何想法吗？

CSS:

  .lock {
    display: inline-block;
    height: 36px;
    width: 30px;
    text-align: center;
}

.lock:before {
    content:url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png');
    margin: 2px;
}

.subMenu-link {
    list-style:none;
    margin: -10px 0 10px;
    padding-left: 30px;
}

span {
    display: inline-block;
    background-color: pink;
}

HTML:

<li class="subMenu">
    <a href="">
        <i class="lock"></i>                   
        <span>User Account</span>
    </a>
    <ul class="subMenu-link">
        <li>One Link</li>
        <li>One Link</li>
        <li>One Link</li>
        <li>One Link</li>
    </ul>                               
</li>

结果显示:

Answer 1

我不知道你为什么要使用 :before 当你有一个空的 i 标签，你想在之前添加内容。为什么不像这样在 i 标签 (.lock) 上添加图标作为背景

  .lock {
    background: url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
  }
  .subMenu-link {
    list-style: none;
    margin: 10px 0;
    padding-left: 30px;
  }
  span {
    display: inline-block;
    background-color: pink;
    vertical-align: middle;
  }

<li class="subMenu">
  <a href="">
    <i class="lock"></i> 
    <span>User Account</span>
  </a>
  <ul class="subMenu-link">
    <li>One Link</li>
    <li>One Link</li>
    <li>One Link</li>
    <li>One Link</li>
  </ul>
</li>

<li class="subMenu">
  <a href="">
    <i class="lock"></i> 
    <span>User Account</span>
  </a>
  <ul class="subMenu-link">
    <li>One Link</li>
    <li>One Link</li>
    <li>One Link</li>
    <li>One Link</li>
  </ul>
</li>

<li class="subMenu">
  <a href="">
    <i class="lock"></i> 
    <span>User Account</span>
  </a>
  <ul class="subMenu-link">
    <li>One Link</li>
    <li>One Link</li>
    <li>One Link</li>
    <li>One Link</li>
  </ul>
</li>