java - 在列表中使用图标代替元素符号点

Question

我有一个 Angular 指令，它会输出一个我正在显示的列表。我想要做的是使用图标而不是元素符号点..我可以让它工作，但目前该图标显示在每行的列表项上方。我不想使用太多CSS，因为我在 Angular 应用程序中使用它作为指令..

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

<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';
}

<小时/>

@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;
}

<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>
   

Demo in JSFiddle