リスト内の箇条書きの代わりにアイコンを使用

Question

私が表示しているリストを吐き出した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のBCを使用しないだろうあなた、それが最善の解決策であるとして、CSSを使用したくない...

とにかく、ここでは簡単に（ブートストラップを使用して）行うことができる方法である。

.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

Answer 2

"表示：インライン" を追加してみてください、あなたの要素に。