javascript - 字体真棒图像和字体很大
问题描述
我提取了一个正在另一台计算机上工作的项目。在我加载前端服务器时运行 yarn install 后，在某些页面上字体和图标显得很大。疯狂的是，在我原来的电脑上，一切看起来都很正常。以下是一些屏幕截图：
和
这是我的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）。
解决方案
它可能取决于您的一般字体大小和使用fa-5x类。
我将首先删除fa-5x应该减小大小的字体。您还可以查看此Font Awesome 页面，该页面进一步解释了大小图标。
用你的计算器试试 - 把它改成：
<i class="fa fa-calculator"/>
推荐阅读
- sql - 如何在 sql server 的自由文本字段中找到 16 位字符串？
- powershell - 用于测试的 Docker 映像中特定版本的 Powershell
- javascript - 新手>如何搜索和排列提示词<
- sql-server - 批量复制数据而不进行排序
- css - Firefox CSS样式表未加载
- c# - 使用 Autofac 将 IServiceProvider 注入工厂类
- c++ - System.Runtime.InteropServices.SEHException 与最新的 Crystal Report Runtime SP27
- java - 更快地遍历地图并匹配键中的模式
- delphi - 如何在 DrawAllPoints:= false 时绘制每个像素、巨大 TeeChart FastLine 系列的最小值和最大值？
- c# - C#如何获取两个字符之间的字符串？升C