使用图标而不是列表中的项目符号点

Question

我有一个Angular指令，我做了哪个吐出了我正在显示的列表。我想要做的是使用一个图标而不是一个项目点...我有点工作，但目前图标显示在每行的列表项目上方。我宁愿不使用多少css bc我在角应用程序中使用它作为指令..

这是我到目前为止所尝试的......

<div class="alert alert-danger" ng-if="errors.length > 1">
    <ul class="list-unstyled" ng-repeat="err in errors">
        <i class="alert-icon-danger alert-icon"></i><li ng-bind="err"></li>
    </ul>
</div>

Answer 1

我不知道你为什么不想使用CSS，因为这是最好的解决方案......

无论如何，这是如何轻松完成的（使用Bootstrap）：

.glyphi-bullet li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
}

＆＃13;

＆＃13;

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
        
.custom-bullet li {
    display: block;
}

.custom-bullet li:before
{
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #CCCCCC;
}

＆＃13;

<ul class="custom-bullet">
    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</li>
    <li>Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.</li>
    <li>Qui officia deserunt mollit anim id est laborum.</li>
</ul>
   

＆＃13;

＆＃13;

＆＃13;

Demo in JSFiddle

Answer 2

尝试在元素中添加“display：inline”。