根据它们的值显示图标(Angular 4+)？
根据它们的值显示图标是一个前端开发的需求，可以通过使用Angular 4+框架中的图标库来实现。Angular 4+框架提供了多个图标库，其中最常用的是Font Awesome和Material Icons。
- Font Awesome（https://fontawesome.com/）是一个流行的图标库，提供了丰富的矢量图标。它的优势包括：
- 大量的图标选择，涵盖了各种不同的领域和用途。
- 可以通过CSS类名的方式轻松地在HTML中使用图标。
- 可以自定义图标的大小、颜色等样式。
- 支持响应式设计，可以根据屏幕大小自动调整图标大小。
- 在Angular 4+中使用Font Awesome，首先需要在项目中引入Font Awesome的CSS文件。可以通过以下步骤实现：
- 在项目的根目录下的
index.html文件中，添加以下代码到<head>标签中： - 在项目的根目录下的
index.html文件中，添加以下代码到<head>标签中： - 在需要使用图标的组件中，可以直接在HTML中使用Font Awesome提供的CSS类名来显示图标，例如：
- 在需要使用图标的组件中，可以直接在HTML中使用Font Awesome提供的CSS类名来显示图标，例如：
- 这将显示一个用户图标。
- Material Icons是由Google提供的图标库，专为Material Design风格的应用程序设计而创建。它的优势包括：
- 与Angular Material框架无缝集成，可以轻松地与其他Material Design组件一起使用。
- 提供了大量的图标选择，符合Material Design的设计准则。
- 可以通过CSS类名的方式在HTML中使用图标。
- 支持自定义图标的大小、颜色等样式。
- 在Angular 4+中使用Material Icons，首先需要在项目中引入Material Icons的CSS文件。可以通过以下步骤实现：
- 在项目的根目录下的
index.html文件中，添加以下代码到<head>标签中： - 在项目的根目录下的
index.html文件中，添加以下代码到<head>标签中： - 在需要使用图标的组件中，可以直接在HTML中使用Material Icons提供的CSS类名来显示图标，例如：
- 在需要使用图标的组件中，可以直接在HTML中使用Material Icons提供的CSS类名来显示图标，例如：
- 这将显示一个人物图标。
总结： 根据它们的值显示图标可以通过使用Angular 4+框架中的图标库来实现。常用的图标库包括Font Awesome和Material Icons。Font Awesome提供了丰富的矢量图标选择，可以通过CSS类名的方式在HTML中使用。Material Icons是由Google提供的图标库，与Angular Material框架无缝集成，符合Material Design的设计准则。在具体应用中，可以根据需求选择合适的图标库来实现图标的显示效果。
相关·内容
我想根据它接收的值显示一个图标。目前，图标出现在所有行，但我希望有一个特定的条件，它将只出现在值是“活动”。
浏览 6提问于2019-09-04得票数 0
回答已采纳
我在使用scss向我的Angular 4+项目添加字体时遇到了问题。我已经尝试了这里给出的许多步骤:对于基于scss的项目，主要是将@import '~/..问题是它被编译了，看起来像是在工作，因为我至少在图标应该在的地方得到了一个块，而没有它我什么也得不到，但仅此而已。我可以尝试导入angular-cli中的css文件，但我更愿意使用scss的方式。有没有人在angular <
浏览 1提问于2017-10-24得票数 5
我想创建一个条件模板，它将根据{{status}}的引用值显示不同的内容。 我有一个表和状态列，我需要改变文本的颜色，这取决于它是“活动”或“停用”。它似乎不能工作，我怎样才能使它与Angular 4+一起工作？
浏览 18提问于2019-09-04得票数 1
我过去在Angular 4+项目中使用过Material的图标字体，只要组件的封装是模拟的。我目前的项目只需要支持最新版本的Chrome，所以我打算将所有组件都设置为ViewEncapsulation.Native，据我所知，它使用浏览器的原生ShadowDOM。但是，我不能让材质图标字体在我的任何组件中呈现。<link
浏览 13提问于2017-07-31得票数 4
我有下一个问题..我有一个Angular 4+应用程序，我正在使用PrimeJS处理语法突出显示(我遵循了Tero的教程)。我遇到的问题如下：<pre><code [ngClass]="languageClass">{{ text }}</code></pre>
正如您所看到的，我正在创建一个绑定，以根据组件中的</em
浏览 5提问于2018-07-04得票数 0
1回答
正如标题中所描述的，无法呈现来自NG的一些图标。main.component.html <nz-sider nzCollapsibleoutline"></i> Cannot render<br><&#x
浏览 11提问于2021-07-25得票数 6
回答已采纳
1回答
我在ionic的移动应用程序中工作，我必须将变量推送到另一个页面 我已尝试使用推送，但出现错误：'NavController‘类型上不存在属性’NavController.push‘ <ion-card
浏览 12提问于2019-09-06得票数 0
1回答
我有一个图标列表，这些图标要么是" on“，要么是"off”，这取决于$scope中的布尔值。我创建了两个CSS类-- clrOn和clrOff --它们只是不同的颜色。我使用class="“分配所有图标class=，如果布尔值为真，则尝试用ng-class="”覆盖该图标。.clrOn {
浏览 2提问于2014-07-30得票数 7
回答已采纳
isChecked"></i> 我正在构建这个角度组件，它在单击时显示实心星形图标(isChecked值为真)，而在不单击时显示空星形图标(isChecked值为假)。但是，我面临着如何使用class.fa-star的问题，因为angular会对显示哪个fa-star感到困惑(实心星形还是中空星形，因为它们具有相同
浏览 17提问于2021-03-30得票数 0
我有几个数字我想在托盘图标上显示..。为此，我需要将这些数字转换为图标或任何位图图像，....need帮助是它们在wpf c#中的任意类或属性。任何方法..。我尝试过的方法行不通..。Graphics.FromImage(newimg);
但此代码在当前wpf c# .net 4+
浏览 2提问于2014-09-05得票数 0
回答已采纳
使用WordPress 4+，是否有可能创建自己的泛型并将它们添加到与wordpress捆绑的现有列表中？我知道我想要什么，我可以设计插画，但默认的图标与CMS不接近它。如果是的话，网上有教程吗？我宁愿走这条路，也不愿在加法的大字体系统上加上通用图标。
谢谢
浏览 0提问于2016-11-12得票数 4
回答已采纳
我在我的plist中定义了5个项目。它只显示了4.♂️
我在Simulator和actual iPhone XS Max中尝试过。
浏览 74提问于2019-03-03得票数 -1
回答已采纳
我看了很多帖子，但还没有找到一个和我想要的很匹配的帖子。我拆分成多个控制器，以便清晰地将功能划分为多个区域。有一个集中的服务，它包含在各个控制器之间传递的所有数据，并显示在不同区域的屏幕上。$scope.package = SampleService.getPackage();
然后，我使用ng-repeat遍历包，它包含一个数组，并且可能包含要显示的数据的嵌套数组。特别是，我设置了几个值true/fals
浏览 2提问于2014-12-13得票数 1
在相关表中插入记录时，我希望在phpmyadmin的下拉框中显示更多列(按外键约束)。
我想知道如何在下拉框中显示下面的tab1.name，每个tab1.id记录。有人告诉我使用“选择要显示的字段”，但是这个选项没有显示。
浏览 10提问于2012-04-18得票数 1
我正在使用Fort Awesome库在我的Angular 7项目中插入图标。设置是正确的，因为我能够在我的网页上看到图标。问题是，我如何在ngClass中使用这些图标，以便根据变量的值动态更改它们？下面是我的html代码： <a (click)="toggle(filters[0])" data-toggle="col
浏览 8提问于2020-02-06得票数 0
回答已采纳
1回答
我在我的Angular应用程序中呈现了一个动态页面。我想根据客户端的不同，根据配置来改变收藏图标。例如，如果客户是tesco，则收藏夹图标应该是tesco收藏夹图标和so。 有什么想法吗？我想用纯angular来做，所以请拒绝使用javascript的想法。
浏览 11提问于2020-01-21得票数 2
回答已采纳
2回答
我已经意识到AngularJS 1现在已经相当老了，并且在Angular 2和更高版本中已经有了更多的重大变化。同时Angular 5也刚刚问世。我有学习Angular的计划，但目前还不知道该从哪个版本开始。我假设Angular 2目前正在市场上流行，紧随其后的是Angular 4(尽管我可能错了)。或者我的问题应该是，我可以在没有任何关于Angular 2的先验知识的情况下直接学
浏览 3提问于2017-11-23得票数 0
6回答
我正在尝试将ionic应用程序中的菜单图标替换为图像图标。我有一个如下的menu.html：<ion-side-menu-content> </ion-item></ion-content>&l
浏览 6提问于2016-09-22得票数 11
我正在使用ngx-gallery来显示一个图片库。尽管我将显示图像箭头属性设置为true，但我看不到图像中的箭头。 我使用的是Angular 7。这是我的gallery.ts文件代码： galleryOptions: NgxGalleryOptions[]; big: '
浏览 33提问于2019-07-02得票数 1
回答已采纳
</div></div>
如您所见，我使用分页的方式非常标准，只需循环遍历数组中的项并显示每页10项。我还有一个指令名为“评级”，它查看项目中名为“评等”的值。并根据评级值插入图标(例如，如果评级为2，指令将插入两个图标-冠图标跨度和3个图标-空图标冠图标跨度。当您更改页面时
浏览 4提问于2015-02-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
