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 字体图标
69 0
|
SpringCloudAlibaba 安全 Java
SpringCloud版本升级后bootstrap.yml配置不生效
SpringCloud版本升级后bootstrap.yml配置不生效
1920 1
|
3月前
|
前端开发 JavaScript
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
这篇文章详细说明了如何在项目中整合Bootstrap V3版本,包括下载Bootstrap和jQuery、将文件复制到静态资源目录、项目中离线引用这些文件,并提供了完整页面代码示例。
详细说明 BootStrap整合 BootStrap 【整合V3版本的,需要依赖JQuery】
|
5月前
|
前端开发 JavaScript 开发者
Bootstrap 3.x 版本基础引入指南
Bootstrap 3.x 版本基础引入指南
|
前端开发
bootstrap 插件 字体图标库 按钮库 日期插件
bootstrap 插件 字体图标库 按钮库 日期插件
|
jenkins 持续交付 开发工具
Jenkins 结合 Angular 展示构建版本
刚好最近在巩固相关的知识内容,以 angular 为主,那么咱就来参与下活动,希望能够坚持下去,顺便拿点小奖励。
Jenkins 结合 Angular 展示构建版本
|
存储 JavaScript 前端开发
Angular 结合 Git Commit 版本处理
我们接下来用 Angular 实现下效果,React 和 Vue 同理。
Angular 结合 Git Commit 版本处理
|
前端开发
安装指定版本的bootstrap 为特定文件夹
安装指定版本的bootstrap 为特定文件夹
521 0
如何安装 Angular CLI 并且检查 CLI 的版本
想在系统中安装 Angular CLI ,如何进行安装并且如何检查 CLI 的版本? 可以使用命令:npm install -g @angular/cli 进行安装。 使用命令 ng version 来查看 Angular 的 CLI 的版本
2332 0