Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案

简介: Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案

是的,笔者最近开始磨磨蹭蹭学起了这个Angular(等我系统性学习后,后面的博客估计会有很多关于Angular的东西了,当然后端开发依然是我的主打)。


Angular版本确实可以说是更新飞快了(能不能稳定点???)。我就是很拼,用的7版本, 然后bootstrap用的4版本。 于是乎,发现,在bootstrap4版本里面,它不给用Glyphicons 字体图标 了(为啥不给用,自己去官方看)。


那么我就是想要这些小图标啊,怎么办???


网上解决方法很多,我刚才都试了下,什么3版本fonts迁移到4啊;下载其他图标库啊等等。


我不管,我推荐一个 我自己觉得最容易操作使用的方法(用font-awesome ),如下:


步骤1:


npm install --save font-awesome            去你的项目那边下载font-awesome  


image.png


下载成功后,去检查一下:


image.png


步骤2:


@import '~font-awesome/css/font-awesome.css';  去styles.css文件里面加这个(告诉全世界,你的项目可以使用font-awesome样式了)


image.png


步骤3:


开始使用吧。


例子:我想要小星星。 那就去找个html页面,直接使用。


这些小图标代码怎么来的?  去官网复制粘贴啊:http://www.fontawesome.com.cn/icons/star-o/


image.png


image.png


好了,就这样吧。

相关文章
|
前端开发
Bootstrap 字体图标
Bootstrap 字体图标
64 0
|
SpringCloudAlibaba 安全 Java
SpringCloud版本升级后bootstrap.yml配置不生效
SpringCloud版本升级后bootstrap.yml配置不生效
1856 1
|
2月前
|
前端开发 JavaScript
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
这篇文章详细说明了如何在项目中整合Bootstrap V3版本,包括下载Bootstrap和jQuery、将文件复制到静态资源目录、项目中离线引用这些文件,并提供了完整页面代码示例。
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
|
4月前
|
前端开发 JavaScript 开发者
Bootstrap 3.x 版本基础引入指南
Bootstrap 3.x 版本基础引入指南
|
5月前
|
资源调度 JavaScript 编译器
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
2024 年 3 月 1 日安装 Composable Storefront 2211 遇到 Angular 和 TypeScript 版本不匹配的错误
|
5月前
|
JavaScript API 开发工具
Composable Storefront 2211 的 Angular CLI 版本
Composable Storefront 2211 的 Angular CLI 版本
|
5月前
|
资源调度 JavaScript 前端开发
Angular CLI 里打印出来的 TypeScript 版本号是从哪里来的
Angular CLI 里打印出来的 TypeScript 版本号是从哪里来的
|
12月前
|
前端开发
|
Web App开发 JavaScript 前端开发
关于 Angular 和 Node.js 版本的问题
关于 Angular 和 Node.js 版本的问题
|
12月前
|
资源调度 安全 前端开发
Angular 的版本升级策略
Angular 的版本升级策略
下一篇
无影云桌面