정상 및 호버 상태에서 목록 항목에 아이콘을 세로로 추가하면 작동하지 않습니다.

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

출처

2017-01-19 M.I.A

동일은 당신이 각 소재처럼 어떤 라이브러리를 사용하고, CSS를 사용하여 수행 할 수 있습니다 또는 부트 스트랩으로 인해 수직 아이콘과 텍스트를 얻기가 어렵습니다. –

현재 부트 스트랩과 내 자신의 사용자 정의 CSS 중 일부를 사용 –

같은 줄기를 만들면 문제를 해결하는 것이 훨씬 쉬울 것입니다. –

당신은 아이콘 CSS 클래스를 추가해야하고이 클래스는 당신은 당신의 "리"태그에 추가 할 필요가

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

출처

2017-01-19 18:34:24 GSB

입력 해 주셔서 감사합니다. 호버 상태를 설정하고 마우스를 올리면 아이콘을 변경하는 방법을 알려주세요. –

마우스를 가져 가면 아이콘 상태가 변경됩니다. 바라기를 이것은 당신의 문제를 해결할 것입니다. http://callmenick.com/post/nicker-icon-hover-effects-with-css3-transitions – GSB

정상 및 호버 상태에서 목록 항목에 아이콘을 세로로 추가하면 작동하지 않습니다.

답변

관련 문제