Bootstrap4 图标无法使用,使用font-awesome代替

简介: 前言最近正在练手一个Angular4的项目,需要用到矢量图标相关的功能,但是发现Bootstrap4 图标功能失效,进过调查发现是图标功能被移除bootstrap包下,所以在这里记录一下。正文首先将font-awesome进行安装:npm install --save font-awesome然后在angular.json中进行配置,找到styles,将下方位置进行添加:"./node_modules/font-awesome/css/font-awesome.css"这样在项目中正常使用就行。

前言

最近正在练手一个Angular4的项目,需要用到矢量图标相关的功能,但是发现Bootstrap4 图标功能失效,进过调查发现是图标功能被移除bootstrap包下,所以在这里记录一下。

正文

首先将font-awesome进行安装:

npm install --save font-awesome

然后在angular.json中进行配置,找到styles,将下方位置进行添加:

"./node_modules/font-awesome/css/font-awesome.css"

这样在项目中正常使用就行。
需要什么图标可以直接从font-awesome 官网进行查询

目录
相关文章
|
4月前
|
前端开发 开发者 UED
Web 应用中显示页面字体使用的 font-based icons 技术讲解
Web 应用中显示页面字体使用的 font-based icons 技术讲解
35 0
|
8月前
|
前端开发
Bootstrap 字体图标
Bootstrap 字体图标
47 0
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
286 0
css:网页引入字体@font-face以及动态加载字体
|
4月前
|
前端开发 开发者
关于 FontAwesome 字体图标库的 content 属性
关于 FontAwesome 字体图标库的 content 属性
35 0
|
前端开发 CDN
Font-Awesome4.7.0版本字体图标显示问题
在Font-Awesome4.7.0版本有时可能会出现字体图标显示为空白小方框的情况,本文提供一个解决思路
1073 0
Font-Awesome4.7.0版本字体图标显示问题
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
312 0
Font-Awesome如何引入矢量字体图标
|
前端开发
CSS3中引入多种自定义字体(font-face)
CSS3中引入多种自定义字体(font-face)
402 0
CSS3中引入多种自定义字体(font-face)
|
前端开发
Vue3中使用各类字体图标的正确姿势:本地SVG、Iconfont、FontAwesome、ElementPlus(图标选择器篇)
最近,在项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Icon 之后,理应还有一个图标选择器,可以加载出不同图标库的所有可用图标,方便直接选择使用,完整代码在文末提供。
607 0
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
sketch 如何规范的设置自己的字体样式库( Text styles )
|
前端开发
font-awesome不显示以及字体样式的引入方式:
font-awesome不显示以及字体样式的引入方式:
636 0
font-awesome不显示以及字体样式的引入方式: