font- mat select中很棒的图标未按预期显示
在前端开发中，"font-awesome" 是一个非常流行的图标库，它提供了一系列矢量图标供开发者使用。如果在使用 "font-awesome" 或类似的图标库时，图标未按预期显示，可能有以下几个原因和解决方法：
- 引入图标库的方式有误：确保正确引入了 "font-awesome" 的 CSS 文件，并在 HTML 中正确设置了对应的类名。可以参考 "font-awesome" 的官方文档：font-awesome。
- 字体文件路径错误：如果图标库的字体文件路径不正确，浏览器无法正确加载字体文件，导致图标无法显示。检查字体文件路径是否设置正确，确保字体文件能够被正确加载。
- CSS 样式冲突：有时，其他 CSS 样式可能会与图标库的样式冲突，导致图标无法正确显示。可以通过调整 CSS 的层级关系、使用更具体的选择器或通过重置样式来解决冲突。
- 版本兼容性问题：某些图标库的版本可能存在兼容性问题，与特定的浏览器或前端框架不兼容。尝试使用较新的版本或其他类似的图标库来解决兼容性问题。
如果以上方法都无法解决问题，可以尝试查看浏览器的开发者工具，检查是否有任何错误提示或警告信息。根据错误提示进行调试或搜索解决方案。
除了 "font-awesome"，腾讯云也提供了一些类似的图标库，如 "Tencent Icon"。具体可以参考腾讯云的官方文档：Tencent Icon。这些图标库可以帮助开发者快速引入各类图标，并提供了丰富的图标选择。
需要注意的是，答案中没有提及特定的品牌商，因此不会提及腾讯云的竞争对手或其他云计算品牌商。
相关·内容
我正在开发一个angular应用程序，其中我有一个matInput，并且我试图在matInput的占位符中显示一个图标。我正在尝试使用的字体令人敬畏的图标是info-circle My Code <mat-form-field> class = "fas"Default Value"
[(ngModel)]="
浏览 27提问于2020-10-19得票数 0
1回答
我已经下载了font- have 4.2.0并将其加载到我的蛋糕php项目中。相应的font- stored文件，并存储在以下文件夹中：\app\webroot\css\font-awesome.min.cssapp\webroot\fonts\app\webroot\less\app\webroot\scss
我将ctp文件中</
浏览 1提问于2014-11-19得票数 1
1回答
我想把垫子图标内的选择。其想法是在select中拥有所有可用的水果状态，而不是显示它们的名称(或ids)，显示它们的mat图标表示形式。虽然我似乎无法用图标来替换文本，但select还是如出一辙。我试过的是：
->用一个简单的span替换了mat图标，代之以字体令人敬畏的</em
浏览 1提问于2018-09-14得票数 1
回答已采纳
我在这里用图标的stackbiltz创建了嵌套的sidenav
在这里，他们使用mat-icon来显示sidenav菜单中的图标显示，对于我的项目来说，大部分图标在mat-icon中是没有的，所以我计划使用字体很棒的图标我需要帮助访问字体-可怕的图标通过组件。我需要你的帮助
浏览 9提问于2019-02-18得票数 0
在尝试更改垫子按钮中的文本颜色时，我在css项目中添加了一个theme.scss。($mat-indigo, 700, 300, 900);$candy-app-warn: mat-palette($mat-deep-orange, A200);
$candy-app-theme: mat-light-theme($candy-ap
浏览 39提问于2019-03-09得票数 2
我正在尝试在选择列表中的选项中嵌入图标。使用令人敬畏的字体图标，不显示任何图标。<select></select>
我可以使用f
浏览 0提问于2013-05-13得票数 18
我有一个里面有mat-select的mat-form-field。这与预期的一样。appearance="outline"提供了mat-form-field。现在，我想在大纲中添加第二个组件apm-lock，它显示一个要锁定或解锁的图标。mat-select。当我单击图标时，如何确保选择不会打开？ 此外，图标
浏览 12提问于2021-07-05得票数 0
回答已采纳
我使用这个角材料在我的角5应用程序中选择： <mat-select placeholder="Contact *" formControlName="contact">
<mat-option *ngFor="let contact of contacts" [value]="contact&q
浏览 1提问于2018-04-10得票数 38
回答已采纳
1回答
我正在试着为我的星级设置一个很棒的字体图标。href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"><link rel="stylesheet" href=&q
浏览 1提问于2016-01-09得票数 0
3回答
我尝试使用角选择材料，我需要动态添加图标到选项中，并在选择我的ts代码时显示它： <mat-select disableOptionCentering panelClass="dropDown-panel" (selectionChange)="onRoomChange($event.value)">
<mat-option *
浏览 13提问于2020-07-22得票数 0
1回答
如何修正mat-图标在mat-select(多重)中的问题，在添加mat-图标和选择选项mat-图标值之后也显示在所选的值中，请参阅附加图像。<mat-form-field class="p-8 w-100-p" fxFlex>
<mat-select
浏览 9提问于2020-03-03得票数 1
回答已采纳
我工作的角度7和我的要求之一，我有创建一个垫-选择与垫图标。我面临的问题是，我要么可以让图标显示，要么可以让选项标签显示，但不能两者都显示。"> <mat-select-trigger><mat-icon>
浏览 13提问于2019-10-02得票数 1
回答已采纳
1回答
实际上，我之前有一个更长的问题，但我认为这将是最容易的定位。当我最初加载页面时，navigationBanner中的一些项发生了移位。但当我在文本框中输入订单号后，系统会重新加载...一切都在它应该在的地方。我假设我的css没有在应该加载的时候加载，但我不能完全确定，因为我对html和CSS一无所知。<div id="background"&
浏览 1提问于2012-08-04得票数 0
回答已采纳
2回答
如果下拉列表是打开的，箭头应该指向上面，如果是关闭的，箭头应该指向向下。我还试图将“清除”图标移动到箭头图标的左侧(目前它显示在右侧)。谁能给我指明正确的方向？请参阅附图：<mat-form-field [floatLabel]="'never'">
浏览 6提问于2021-01-30得票数 0
回答已采纳
5回答
我用mat自动完成来过滤我的数据。一切都是工作，但我希望有一个下拉箭头，以显示所有的选项在输入。在md-自动完成中，我们可以使用dropdown-arrow="true"，但是在mat中，自动完成不支持它.那么，我如何在mat自动完成中添加下拉箭头呢？这是我的component.ts <mat-f
浏览 1提问于2019-04-08得票数 7
3回答
不确定是否可以只显示输入类型日期的图标。<input type="datetime-local" id="test" name="test">
交替
浏览 3提问于2021-11-11得票数 2
回答已采纳
我尝试使用[innerHTML] I <mat-option> of <mat-select>，它可以很好地处理下拉列表，但对所选的值不起作用。浏览器Google Chrome 68.0.3440.106 (正式构建)(64位)
<mat-form-field class=&qu
浏览 0提问于2018-09-01得票数 4
回答已采纳
1回答
角垫图标不显示图标
、、、
我试着用垫子图标，但它不能正常工作。我有一张桌子，在一个数据单元里，我试图使用一个垫子图标。问题是它没有显示图标，而是显示名称。我在app.module.ts中包括了从“@角/材料/图标”导入{app.module.ts}，例如:清除=>，它显示:清除我的代码：
浏览 1提问于2021-09-08得票数 0
回答已采纳
1回答
我想为我的mat-select中的每个选项添加一个图标 <mat-select placeholder="warningtype"
[(ngModel)]="selected.warningType" matInput #warning="ngModel" name="warning"&g
浏览 0提问于2018-05-22得票数 2
2回答
在新的角材料树组件中，这是示例()中使用的标记的一部分：</mat-tree-node>
注意，在mat-icon标记中有一个内插，它决定要显示哪个图标。我在我的项目中使用字体令人敬畏，而不是材料设计图标<
浏览 0提问于2018-05-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
