Angular4 项目上字体很棒的图标未加载

2024-03-12

我正在使用 font-awesome 开发 Angular 4 项目,我按照本指南使用 npm 安装库:如何将 font-awesome 添加到 Angular 2 + CLI 项目 https://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project

我已将项目配置为使用 ng-serve 命令编译 scss 样式表,我的 angular-cli.json 样式路径如下所示:

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"

      ],

我想制作一个带有地址卡图标的按钮,我也在使用 Bootstrap 4,所以它看起来像这样:

<button class="btn btn-sm btn-primary"><span class="fas fa-address-card"></span></button>

but when it loads, it looks like this:


您应该使用类 fa 而不是 fas。 fa 类设置字体。 (向@mike-hill 致敬)

查看源代码http://fontawesome.io/icon/address-card/ http://fontawesome.io/icon/address-card/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular4 项目上字体很棒的图标未加载 的相关文章

  • 如何在 Angular 2 应用程序中从 TypeScript/JavaScript 中的字符串获取类?

    在我的应用程序中 我有这样的内容 user ts export class User 现在 我这样做 应用程序组件 ts callAnotherFunction User 如果我将类名作为字符串 即 我该如何做到这一点 User 如果可能的
  • MatAutocomplete 值 X 显示

    我的自动完成显示具有以下定义的对象的值 export class Person id number name string cityName string 这是自动完成模板
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段
  • 在 Angular 中获取当前路由路径名称的最简单方法是什么?

    我正在寻找一种获取当前路线的路径名称的好方法 这是我能找到的最简单的 this route snapshot firstChild url 0 path 有没有更好的办法 谢谢 谢谢大家的回答 这是我发现我必须做的 router event
  • 没有导出的成员/节点模块

    我刚刚开始使用 5 分钟快速入门找到的 Angular 2 Typescripthere https angular io docs ts latest quickstart html 我遇到了一个看起来很常见的问题 但可能有点不同 我遇到
  • 使用 Nginx 在 Docker 容器内部署带有路由器的 Angular2

    我正在尝试部署一个使用框架的路由器功能的 Angular 2 但在 docker 容器内使用 nginx 为其提供服务时遇到一些问题 由 angular cli 构建的 Angular 应用程序具有如下文件结构 dist 08c42df75
  • 如何转义角度 HttpParams?

    在 Angular 服务中 我使用 HttpParams 将字符串发送到服务 get phone string Observable
  • 类型“boolean”不可分配给类型“Observable

    我有那个代码 method Observable
  • Angular 2 重复标头

    使用时出现重复标头问题
  • Angular2 与 ASP.NET 5 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在将 Angular2 与 ASP NET5 gulp 和 typescript 结合使用 当我解决
  • 使用 facebook 共享动态更新元标签 - Angular 6

    我需要动态更新元标记 如 og title og description 和 og image 并在 facebook 上共享相同的内容 我已经尝试了所有方法 但没有任何效果 首先 我尝试使用 javascript 设置元标记 如下所示 v
  • Angular2 viewContainerRef.createComponent 工作正常

    我使用 viewContainerRef createComponent 将动态组件加载到根组件 但实际上它附加了错误的位置 my code app compoment ts export class AppComponent privat
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • Angular with/Angular Material - 对话框主题损坏

    您好 我遇到了 Angular Material 主题在对话框组件中中断的问题 其中文本和其他组件的颜色未按应有的方式工作 在 app component 中 我有一个设置图标按钮来打开对话框 main settings dialog 但当
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo
  • 设置 Angular 2 http 请求的基本 url

    我正在尝试为所有 Angular 2 http 请求设置基本 url 以下是我的应用程序的基本设置 class HttpOptions extends BaseRequestOptions url string http 10 7 18 2
  • Angular2 - 在反应表单上设置日期字段

    我有一个使用两个日期字段的组件 开始日期和结束日期 默认情况下 我禁用了结束日期字段 当他们选择开始日期时我会切换它 this transitionForm this fb group effectiveEndDate value disa
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我

随机推荐

  • React Native - 无法在前端导入猫鼬(但它可以从后端运行)

    我无法在前端导入猫鼬 但它在后端有效 我有一个单独的后端目录 我有一些代码可以将几个用户添加到我的数据库中 这里是 import mongoose from mongoose import User from models user con
  • 信号量和互斥量在实现上有什么区别?

    我读到互斥锁和二进制信号量仅在一方面不同 在互斥锁的情况下 锁定线程必须解锁 但在信号量中 锁定和解锁线程可以不同吗 哪一种效率更高 假设您知道信号量和互斥体之间的基本区别 为了快速 简单的同步 请使用临界区 要跨进程边界同步线程 请使用互
  • PyQt:悬停按钮时更改光标

    我正在尝试制作一个按钮 或任何其他 Qwidget 这将在悬停时更改用户光标 例如 当我将鼠标悬停在 QPushButton 上时 它会将光标从箭头更改为指向手 我正在使用 Qt 样式表 所以我不完全确定 但是有没有办法在那里做类似的事情
  • WebSockets-将图像发送到连接的客户端

    这是我在 stackoverflow com 上发表的第一篇文章 所以我会尽量简单明了 我必须使用 websockets 开发 web 应用程序的功能 我能够发送文本数据 使用websockets 但不是图像 我已经查看并尝试了不同的可能性
  • 有没有办法创建由 `std::function<>` 包装的函数的哈希值?

    我有一个 C 函数 需要一个std function作为输入参数 具体来说 一个std function
  • IE 悬停选择问题

    我和一个朋友正在尝试解决 IE 7 8 我们在这里构建了一个规范的示例 http www mathgladiator com share ie select bug hover css menus htm http www mathglad
  • 如何从音频文件中分离男声和女声(C++或Java)

    我想区分音频文件中的男声和女声并将它们分开 作为输出 我希望将两个声音分开 你能帮我一下吗 编码可以用java还是c 完成 这可能是一个非常复杂的问题 它类似于编写自己的语音识别 或识别 算法 您首先可以将音频转换为频域 这是使用快速傅立叶
  • HTML(5)/CSS 中的列布局

    HTML5 CSS 中是否有一种方法可以将列布局如下所示 并且仍然可以正确地显示文本 C1 C2 C3 C4 C5 C6 只是为了澄清 我希望能够在单个元素中编写所有文本并让 CSS 创建列 虽然这使用单个元素 但必须手动定义中断 Use
  • 无法将 SQL 查询转换为左外连接的 LINQ 查询

    问题陈述 我正在尝试将我的 Sql 之一转换为 linq 查询 但我无法获得所需的输出 谁能建议我应该做什么 SQL查询 SELECT AssetTagging AssetID AssetTagging AssetDescription R
  • 离子滚动到特定列表项

    有没有办法滚动到离子列表中的特定项目 例如在此代码笔中 https codepen io anon pen grEBQJ https codepen io anon pen grEBQJ 当我转到测试按钮时 我想滚动到带有文本 文本 的列表
  • GBM 上的 EGLDisplay

    我想通过 EGL 创建 OpenGL 上下文 由于我实际上不会绘图 所以我想将 Pbuffers 与 GBM 平台结合使用 这是代码 C99 include
  • 有没有办法在 pysvg 中添加换行符?

    考虑以下最小工作示例 from pysvg text import from pysvg builders import doc svg doc addElement text hello nWorld 150 50 doc save He
  • 是否有 WebMethod 的替代方案来绕过回发但访问会话

    因此 我正在尝试提高 ASP Net Webforms 应用程序的性能 像往常一样 回发会尽力降低性能 我开始了解 WebMethod 调用 我也设法开始工作 然而 对于我的特定场景 我需要访问会话 这在静态方法中显然是不可能的 所以现在我
  • Swift 3 - 如何将包含结构的结构数组转换为 JSON?

    我有一个数组Field我想要转换为 JSON 字符串的结构 Field定义为 struct Field var name String var center LatLng var perimeter LatLng func toDictio
  • 为什么 Azure 通知中心标签不保存?

    我正在尝试向通知中心发送消息 但我的标签未保存 I checked service hub with service hub explorer and tags are empty 设备注册 var hs new HashSet
  • MapReduce - 如何按值对减少输出进行排序

    如何按值降序对减速器输出进行排序 我正在开发一个必须返回最常听的歌曲的应用程序 因此 歌曲必须按照收听次数排序 我的应用程序以这种方式工作 Input songname userid boolean MapOutput songname u
  • 发现插件与新版本不兼容:Firebase Services

    我无法更新到 Android Studio 4 0 当我检查更新时 它向我显示以下消息 发现与新版本不兼容的插件 Firebase Services 这是 Android Studio 插件的 Firebase 服务 https plugi
  • Log4j2 RegexFilter 模式不匹配

    我的日志中有以下几行我想排除 所以我想使用RegexFilter这样做 INFO 2018 05 20 14 52 15 993 qtp22844606 20 TimingFilter Request time 16 ms INFO 201
  • ContinueWith TaskContinuationOptions.OnlyOnFaulted 似乎没有捕获从已启动任务引发的异常

    我正在尝试使用 ContinueWith 和 OnlyOnFaulted 捕获从任务方法引发的异常 如下所示 但是 当我尝试运行此代码时 出现未处理的异常 我希望任务能够完成 因为我已经处理了异常 但是 Task Wait 遇到 Aggre
  • Angular4 项目上字体很棒的图标未加载

    我正在使用 font awesome 开发 Angular 4 项目 我按照本指南使用 npm 安装库 如何将 font awesome 添加到 Angular 2 CLI 项目 https stackoverflow com questi