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

I have an Angular directive that I've made which spits out a list that i am displaying. What i want to do is use an icon instead of the bullet point..i kind of have it working but currently the icon shows up above the list items on each line. i would prefer not to use much css bc i am using this as a directive in an angular app..

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

Here is what I have tried so far...

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

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

2 个解决方案

#1

I don't know why you don't want to use CSS, as it is the best solution...

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

Anyway, here is how it can be easily done (using Bootstrap):

无论如何,这是如何轻松完成(使用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

#2

Try to add "display: inline" to your elements.

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