Выравнивание текста рядом с иконкой с использованием: до

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

Я не знаю, почему вы используете: раньше, когда у вас есть пустой я тег, который вы хотите, прежде чем добавлять содержимое. Почему просто не добавить значок в качестве фона на я теге (.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>

Answer 2

ли вы пытались "вертикальное выравнивание" - это, кажется, работает.

.lock:before { 
    content:url('https://cdn3.iconfinder.com/data/icons/simplius-pack/512/pencil_and_paper-16.png'); 
    vertical-align: -10%;  
} 

CODEPEN

Answer 3

если вы хотите centerize вертикально вы можете использовать высоту строки , например, если высота .lock составляет 30 пикселей, поэтому установите высоту линии: до диапазона до 30 пикселей;