使用Font Awesome管理无序列表中的列表样式大小

时间:2015-05-20 07:28:17

标签: css font-awesome

我得到此代码在无序列表中使用Font Awesome图标。

它工作正常,但我想让图标更大,并使其与文本垂直对齐。

.node .field-name-body ul li { color:#333;list-style: none;}

.node .field-name-body ul li:before {    
    font-family: 'FontAwesome'; /* http://fortawesome.github.io/Font-Awesome/cheatsheet/ */
    content: '\f043';
    margin:10px 5px 0 -15px;
    color: black;
} 

添加 font-size 对我没用

1 个答案:

答案 0 :(得分:1)

*{
    padding: 0;
    margin: 0;
}
ul{
    margin: 25px;
}
ul li { 
    color:#333;
    list-style: none;
}

ul li:before {    
    content: '';
    font-family: 'FontAwesome'; 
    content: '\f043';    
    color: black;
    vertical-align: middle;
    display: inline-block;
    font-size: 25px;    
    margin-right: 5px;
} 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    <li>Link4</li>
</ul>