字體真棒圖像和 fonts 是巨大的

Question

我提取了一個正在另一台計算機上工作的項目。 在我加載前端服務器時運行 yarn install 后，在某些頁面上 fonts 和圖標顯得很大。 瘋狂的是，在我原來的電腦上，一切看起來都很正常。 以下是一些屏幕截圖：

和

這是我的 html 代碼：

<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
    <h2>Asigurare</h2>
    <ol class="breadcrumb">
        <li>
            <a>Acasa</a>
        </li>
        <li>
            <a>Calatorie</a>
        </li>
        <li class="active">
            <strong>Asigurare Calatorie</strong>
        </li>
    </ol>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h5>Asigurare Calatorie</h5>

                <div class="ibox-tools">
                    <div class="col-lg-3 pull-right" ng-show="showWizard">
                        <button type="button"  class="btn btn-block btn-danger" ng-click="showWizard=false">
                            <i class="fa fa-fast-backward"> </i> Inapoi
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-12 col-sm-12" ng-show="!showWizard">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2>Click pe optiunea dorita</h2>
                    </div>
                    <div class="panel-body">
                        <div class="row media-object">
                            <div class="col-xs-6 col-sm-6 option-button">
                                <button class="btn btn-primary dim btn-block option-button btn-text-center" type="button" ng-click="goToSearchExistingOffers()">
                                    <center><i class="fa fa-search fa-5x"/> </center>
                                    Cauta oferte existente
                                </button>
                            </div>
                            <div class="col-xs-6 col-sm-6 option-button">
                                <button class="btn btn-primary dim btn-block option-button btn-text-center" type="button" ng-click="showWizard=true">
                                    <center><i class="fa fa-calculator fa-5x"/> </center>
                                    Calculeaza oferte noi
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ibox-content wizard" ng-show="showWizard">
                <!--<div class="steps clearfix">
                    <button type="button" ng-class="{'btn-primary': stack[0]==true, 'btn-default': stack[0]==false}" class="btn col-lg-3 stepsButtons">
                        1. Informatii asigurare
                    </button>
                </div>-->
                <div class="wizard">
                    <div class="content">

                    <form name="asigurareCalatorieForm" class="p-lg">
                        
                    <!-- /////////////////////////////// PAGE CONTENT HERE ///////////////////////////// -->
                    
                        <!-- EACH STEP IS BETWEEN FIELDSET TAGS --> 
                        <fieldset ng-show="head==0">
                            <h2>Informatii despre asigurat</h2>
                        
                            <div class="row">
                                <div class="form-group col-lg-4">
                                    <label>Nume *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.lastName" name="lastName"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Prenume *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.firstName" name="firstName"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>CNP *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.cnp" name="cnp"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Numar de telefon *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.phone" name="phone"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Email </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.email" name="email"/>
                                </div>
                            </div>

                            <h2>Adresa asiguratului</h2>
                        
                            <div class="row">
                                <div class="form-group col-lg-2">
                                    <label>Judet </label>
                                    <select class="form-control" data-ng-model="county" name="county" ng-options="county.countyName for county in counties" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Oras </label>
                                    <select class="form-control" data-ng-model="city" name="city" ng-options="city.cityName for city in cities" ng-disabled="!county.countyId">
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Strada </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.street" name="street"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Numar </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.streetNo" name="streetNo"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Bloc </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.building" name="building"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Scara </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.buildingEntrance" name="buildingEntrance"/>
                                </div>
                                <div class="form-group col-lg-1">
                                    <label>Etaj </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.level" name="level"/>
                                </div>
                                <div class="form-group col-lg-3">
                                    <label>Apartament </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.flatNo" name="flatNo"/>
                                </div>
                            </div>

                             <h2>Detalii calatorie</h2>
                            
                            <div class="row">
                                <div class="form-group col-lg-2">
                                    <label>Scopul calatoriei </label>
                                    <select class="form-control" data-ng-model="travelPurpose" name="travelPurpose" ng-options="travelPurpose.travelPurposeName for travelPurpose in travelPurposeList" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Tara de destinatie</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.travelInsurance.travelDestination" name="travelDestination"/>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Tip calatorie </label>
                                    <select class="form-control" data-ng-model="travelType" name="travelType" ng-options="travelType.travelTypeName for travelType in travelTypeList" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Data Plecarii</label>
                                    <p class="input-group ">
                                        <input type="text" class="form-control" uib-datepicker-popup="{{format}}"
                                        is-open="isOpenLeavingDate" ng-model="leavingDate" name="leavingDate"/>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="openLeavingDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                        </span>
                                    </p>
                                </div>      
                                <div class="form-group col-lg-2">
                                    <label>Suma asigurata </label>
                                    <select class="form-control" data-ng-model="travelInsuredAmount" name="travelInsuredAmount" ng-options="travelInsuredAmount.travelInsuredAmountName for travelInsuredAmount in travelInsuredAmountList" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Data Intoarcerii</label>
                                    <p class="input-group ">
                                        <input type="text" class="form-control" uib-datepicker-popup="{{format}}"
                                        is-open="isOpenReturningDate" ng-model="returningDate" name="returningDate"/>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="openReturningDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                        </span>
                                    </p>
                                </div>  
                            </div>  
                        </fieldset>
                        <!-- /////////////////////////////// END PAGE CONTENT HERE ///////////////////////////// -->
                                                    
                        <button type="button" ng-show="head==0" class="btn btn-primary col-lg-2 stepsButtons" ng-click="save()">
                            Trimite formularul
                        </button>
                        
                    </form>

                    </div>
                  </div>
            </div>
        </div>
    </div>

</div>

這也是我的 package.json：

和

我還檢查了我的 css 文件是否正確加載。 我也使用 INSPINIA 自定義主題。 我不知道為什么這只發生在我的第二台電腦上。 瀏覽器是相同的（最新的 Chrome）。

Answer 1

這可能取決於您的一般字體大小和使用fa-5x class。

我將首先刪除fa-5x ，因為這應該會減小尺寸。您還可以查看此Font Awesome 頁面，該頁面進一步解釋了調整圖標的大小。

用你的計算器試試 - 把它改成： <i class="fa fa-calculator"/>

Answer 2

我想到了。 在我運行 yarn install 的第二台計算機上，更新版本的 jquery (3.6.0) 被拉入 node_modules。

Since jquery 3.5.0, a breaking change was made regarding how HTML tags are interpreted, more details here: https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/

因此，作為一種解決方法，我將我的上層版本限制為 jquery 3.4.1，一切正常。 長期的解決方案是使用 jquery-migrate 來修復我的不兼容代碼，詳細信息在這里： https://jquery.com/upgrade-guide/3.5/