Bootstrap 4 glyphicon 图标显示不出来(无fonts文件夹)

最新推荐文章于 2021-09-01 08:52:18 发布
最新推荐文章于 2021-09-01 08:52:18 发布
阅读量2.1k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq497028254/article/details/100106885
版权

为什么Bootstrap 4 glyphicon 图标显示不出来？

 

bootstrap4已经不默认提供图标了，但还是需使用，该怎么做呢？

在下面的博客中找到了解决方法：（感谢博主~~）

Bootstrap4使用图标失效的解决方案

总体来说就是——

“移花接木”大法，把bootstrap3(https://v3.bootcss.com/getting-started/)里关于 glyphicon的样式代码

添加到我们bootstrap4的css代码里。

然后再加上fonts文件夹的依赖。

就可以用了，亲测有效。

Bootstrap 字体图标(Glyphicons)使用教程

 

 

lq497028254
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap glyphicon图标无法显示的解决方法
09-01
如果不注意bootstrap引入css和fonts的规范，则可能会导致bootstrap 在显示glyphicon图标时无法正常显示，显示为方框。该怎么解决呢？下面小编给大家解答下
Bootstrap3 input输入框插入glyphicon图标的方法
09-02
例如，若要显示锁图标，只需将`glyphicon-user`更改为`glyphicon-lock`： ```html <span class="glyphicon glyphicon-lock form-control-feedback"> ``` 4. **应用到其他输入框**： 上述方法可以轻松应用到...
为什么Bootstrap 4 glyphicon 图标显示不出来？
一个程序媛的成长记录❤
11-25 1万+
bootstrap4已经不默认提供图标了，但还是需使用，该怎么做呢？ 在下面的博客中找到了解决方法：（感谢博主~~） Bootstrap4使用图标失效的解决方案 总体来说就是—— “移花接木”大法，把bootstrap3(https://v3.bootcss.com/getting-started/)里关于 glyphicon的样式代码 添加到我们bootstrap4的css代码里。 ...
Angular7 关于Bootstrap4.x.x版本无法使用Glyphicons 字体图标 简单解决方案
默默不代表沉默
11-22 2542
是的，笔者最近开始磨磨蹭蹭学起了这个Angular（等我系统性学习后，后面的博客估计会有很多关于Angular的东西了，当然后端开发依然是我的主打）。    Angular版本确实可以说是更新飞快了（能不能稳定点？？？）。我就是很拼，用的7版本， 然后bootstrap用的4版本。 于是乎，发现，在bootstrap4版本里面，它不给用Glyphicons 字体图标 了（为啥不给用，自己去官方...
BootStrap中引用glyphicon图标无法显示的解决方式
qq_47759220的博客
10-03 1249
1、首先看一下图标显示失败的页面： 2、经过参考大佬们的经验，我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的，没有把所有的css样式表和fonts文件引入到编译器中去，这个问题就是由于跨域glyphicon没法引用导致的。所以我干脆直接把下载的BootStrap包中的css、fonts、js三个文件直接拷贝到了项目中。像下面这样（img文件是我自己新建的）： 3、文件拷贝完成之后重新刷新页面，所有的图标都可以引用了，成功！ ...
Bootstrap4.X版本无法显示图标
qq_39419241的博客
04-13 1390
之前跟着老师一起使用图标，而且一步一步地跟着老师配置，结果居然用不了 后面查了半天，原来是版本不一样的原因，老师用的是3.X的版本，而我的是4.X的 原来是想说要不我还是用3.3.7版本的bootstrap算了，结果重新安装了，各种报错，无奈只能删了node_modules包，cnpm i重新再来，所以还是使用4.X版本的bootstrap 看了这位大兄弟的才知道如何解决：Bootstrap 4....
bootstrap 4字体图标引入不显示解决方案
JadeDu_的博客
08-22 1295
bootstrap 4下载的资源包没有font文件，在bootstrap 3 里下载资源包把fonts文件拖到羡慕文件里的bootstrap 里面 在bootstrap/dist/css/bootstrap.min.css文件中添加代码样式如下 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts.
bootstrap字体无法引入
欧阳小白闯天涯
07-31 1355
<#--bootstrap字体无法引入--> <script src="${base}/reportdemo/bootstrap-3.3.7-dist/fonts/glyphicons-halflings-regular.eot"></script> 直接将字体文件引入即可 完整原文：http://blog.maptoface.com/post/11...
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
11-26
bootstrap 图标icon符号图标glyphicons不正常显示解决办法如下所示： 分享供各位参考： 1、在ff/http:的地址栏中输入“about:config”，即进入配置界面。 2、进入后，搜索“security.fileuri.strict_origin_policy”...
关于前端页面无法显示bootstrap字体图标的问题
weixin_45111284的博客
08-23 375
关于前端页面无法显示bootstrap字体图标的问题问题截图解决之后![在这里插入图片描述](https://img-blog.csdnimg.cn/20200823200534792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA==,size_16,color_FFFFFF,t_70#pic_center
解决BootStrap4版本以上不能用图标问题
01-08
1.把3版本的fonts文件夹复制到你的目录 2.在bootstrap.min.css后面再复制代码搞定 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.wo
bootstraps资源包（css,fonts,js)
02-01
该资源为网页前端设计资源。资源包括全局css，字体fonts和javascript文件。
解决bootstrap里面提供的Glyphicons图标引入不显示的问题
weixin_43757266的博客
11-22 1653
先贴上解决方案：要把你下好的bootstrap文件里边的fonts文件 也要弄到你的项目文件中去 ！！就可以了，也不需要引入，它会自动的会带有fonts文件夹里边去找。（fonts文件夹中有一些字体文件） 如果你没有把fonts文件夹放到你的项目中去，会出现这样的提示：（最好和你的html的那个文件同级别，并且不能随便改fonts文件夹的名字） 它会说在你的那个项目文件夹中，找不到fonts文...
Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题
damei2017的博客
09-04 1797
把从网上下载的整个bootstrap丢到eclipse中。
今天在学习bootstrap，在使用字体图标的时候，无法显示
someone's blog
09-23 906
解决方法： 将相应文件放到本地搭建的服务器环境中，在浏览器中打开相应网页即可 原因：一开始是用本地文件打开。
Bootstrap自学笔记
weixin_53324535的博客
09-01 941
bootstrap文件下面有三个文件夹，分别是css、fonts、js，其中fonts是字体文件夹，需要配合css文件夹一起使用 <!--获得更好的响应式支持--> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <!--获得bootstrap的css样式--> <linkrel="stylesheet"hr...
Bootstrap4使用图标失效的解决方案
热门推荐
Jack汪喆的技术分享栏
09-17 1万+
博主使用Bootstrap4开发Angular项目时，想使用星星图标但发现不好使，仔细一查是因为Bootstrap移除了收费图标的内容，故搜集了网上相关内容，提供以下解决方案。 1.问题描述 Bootstrap4移除了收费图标的相关内容，如果想使用图标样式需要使用https://octicons.github.com/ 和http://fontawesome.io/提供的内容。当然还可以自行引...
解决Bootstrap字体图标glyphicon无法显示的问题
小小黑的博客
04-22 3762
解决Bootstrap字体图标glyphicon无法显示问题 在官网下载的Bootstrap3版本，将bootstrap.min.css文件引入到自己Web项目中，使用glyphicon时，图标无法显示正常： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
最新发布
07-28
回答: 在本地使用Bootstrap文件时，如果字体图标无法显示，可以尝试以下解决方法。首先，确保你已经正确下载了Bootstrap的CSS、JavaScript和字体文件。你可以从Bootstrap官网下载预编译的压缩版本，其中包含了所需的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值