ノーマルとホバー状態のリスト項目にアイコンを垂直方向に追加すると動作しない

Question

私はangular2 htmlページで作業しています。私はいくつかのulで垂直ナビゲーションバーを作るためにliを使いました。しかし、私はアイコンとテキストの垂直を表示する方法を見つけることができませんでした。ナビゲーションバーのアイコンの下にテキストを表示し、ホバーするとアイコンの状態を変更する方法はありますか？お知らせ下さい。ここにリスト項目のコードがあります。また、私はアイコンを表示するためにラインCSSで使用できますか？

<div> 

     <ul class="navigationMenu" style="margin-left: 2.3em"> 
      <li> 
       <a class="home" (click)="getNewQuoteFinance()" ><img [src]="['./images/icon/newicons/finance_icon.png']" style="margin:0 0 0px 0; width: 40px;height: 40px"> 
         Finance<!--<span>Finance</span>--> 
       </a> 
      </li> 

      <li> 
       <a class="about" (click)="getNewQuoteAsset()"><img [src]="['./images/icon/newicons/asset_icon.png']" style="margin:0 0 0px 0; width: 40px;height: 40px"> 
         Asset <!--<span>Asset</span>--> 
       </a> 
      </li> 

      <li> 
       <a class="services" (click)="getNewQuoteCustomer()"><img [src]="['./images/icon/newicons/customer_icon.png']" 
         style="margin:0 0 0px 0; width: 40px;height: 40px"> 
         Customer <!--<span>Customer</span>--> 
       </a> 
      </li> 

      <li> 
       <a class="portfolio" style="" (click)="getNewQuoteLpi()"><img [src]="['./images/icon/newicons/lpi_icon.png']" style="margin:0px 0px 0px 0px; width: 40px;height: 40px"> 
         LPI <!--<span>LPI</span>--> 
       </a> 
      </li> 
      <li> 
       <a class="portfolio" (click)="getNewQuoteEpi()"><img 
         [src]="['./images/icon/newicons/epi_icon.png']" 
         style="margin:0px 0px 0px 0px; width: 40px;height: 40px"> 
         EPI <!--<span>EPI</span>--> 
       </a> 
      </li> 
      <li> 
       <a class="contact" (click)="getNewQuoteMVI()"><img [src]="['./images/icon/newicons/mvi_icon.png']" 
         style="margin:0px 0px 0px 0px; width: 40px;height: 40px"> 
         MVI <!--<span>MVI</span>--> 
       </a> 
      </li> 
      <li> 
       <a class="contact" (click)="getNewQuoteDiary()"><img [src]="['./images/icon/newicons/diary_icon.png']" 
         style="margin:0px 0px 0px 0px; width: 40px;height: 40px"> 
         Diary <!--<span>Diary</span>--> 
       </a> 
      </li> 

      <li *ngIf="application.applicationID != null"> 
       <!--<li >--> 
       <a class="contact" (click)="getNewQuoteSaveAsDeal()"><img [src]="['./images/icon/newicons/save-as-deal.png']" 
         style="margin:0px 0px 0px 0px; width: 40px;height: 40px"> 
         SaveAsDeal <!--<span>Save As Deal</span>--> 
       </a> 
      </li> 

     </ul> 
    </div> 

Answer 1

あなたは、アイコンのCSSクラスを追加する必要がありますと、このクラスでは、あなたの「LI」タグに追加する必要があり

#mainmenu .img1{ 
     background: url('./images/icon/newicons/finance_icon.png') no-repeat top left; 
     padding: 2px 0 0 25px; 
    } 

    #mainmenu .img2{ 
     background: url('./images/icon/newicons/asset_icon.png') no-repeat top left; 
     padding: 2px 0 0 25px; 
    } 
    And so on... 


    <div id="mainmenu"> 

      <ul class="navigationMenu" style="margin-left: 2.3em"> 
       <li class="img1"> 
        <a class="home" (click)="getNewQuoteFinance()" > 
          Finance<!--<span>Finance</span>--> 
        </a> 
       </li> 

       <li class="img2"> 
        <a class="about" (click)="getNewQuoteAsset()"> 
          Asset <!--<span>Asset</span>--> 
        </a> 
       </li> 
    And so on ... 
      </ul> 
     </div>