html - 在正常和悬停状态下在列表项中垂直添加图标不起作用

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>