关于BootStrap下图标的显示问题

我现在在做自己的毕业设计,用到了bootstrap的这一套css样式,说句心里话,这一套东西确实很好用,但是一个小问题足足浪费了我将近两个小时。

我的问题是:没有办法使用bootstrap下的图标(很好看的图标)比如:

<span class="add-on icon-calendar"></span>

显示日历的图标。自己纠结了将近两个小时但是还是没有解决,最后发现是自己把bootstrap下的img文件夹重命名为image,因此bootstrap没有办法找到图片的路径,导致我没有办法使用文件提供的图标。

因此,只有在你路径设置正确的情况下,是可以正常显示的。最后将路径设置正确之后就一切搞定了。

希望遇到同样问题的朋友可以看到这篇博客!

时间: 2024-08-11 01:33:01

关于BootStrap下图标的显示问题的相关文章

关于不同视图下图标的显示

关于不同视图下图标的显示,例如 小图标显示 中等图标显示 大图标显示 超大图标显示 一会说那个可以看到,不通的视图显示,图标要求也是不同的,主要是考虑到分辨率和清晰度的问题 我们可以使用  IcoFX 工具来做图标,并且IcoFX 可以把多个图标做成一个图片上,这样不同分辨率的屏幕显示就可以显示不同的图标了, 具体步骤如下,首先打开一个图片 可以设置其它的icon 格式大小 例如 之后保存即可.

bootstrap 鼠标悬浮显示备注信息 两种实现方式

一,(默认黑色字体白色背景) sb.append("<td><a data-content='"+rowData[8]+"'>").append(rowData[4]).append("</a></td>"); $(function(){ // 初始化 popover,触发方式为手动触发 $('a').popover({ trigger: 'manual' }) .on('mouseover', f

bootstrap模态弹窗显示大图--自动伸缩比例大小

效果: 在一个table里显示很多的小图,每点击一个图片,显示一张大图. 小图的html<td><img height='120px' width='200px' src="图片地址..."  onclick="showBigImg('{$vo['img']}')"/></td> 显示大图的modal<!--放大图的imgModal-->        <div class="modal fade bs

定位与小图标的显示

css中的div块.文字.图片.标签都可以用定位来固定它的位置,非常方便,而且完全能达到预期的效果,父标签相对定位确定其位置,以后各个子标签都用绝对定位定位,然后用ps量一下标签的确定位置,然后设置top.left或right属性来进行准确确定它的位置,字标签是根据有定位属性的父级进行定位的,如果直接父级没有定位,则依次向上进行寻找,找到有定为属性的父级,就以它为标准进行绝对定位. 网页中有许多小图标,如果每一个都用一张图片 进行显示,会多次请求服务器,早成反应慢,加载慢的情况,这种情况可以将很

echarts之bootstrap选项卡不能显示其他标签echarts图表

在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表. 解决方法: 在js中添加代码: var myChart = echarts.init(document.getElementById('graph')); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { myChart.resize(); });

bootstrap模态框显示控制

默认模态框弹出后,点击背景蒙层部分弹框会消失,如要解决,需要在模态框属性中加 aria-hidden="true" data-backdrop="static"属性即可:

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

1.菜单的显示及各种Bootstrap图标 我们从下图可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都有一个图标,虽然大小不同,我们利用Bootstrap的图标,都是从Bootstrap图标库里面的内容. Bootstrap图标库里面分为了三类内容: Font Awesome:Bootstrap专用图标字体,Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦.CSS对字体可以设置的样式也同样能够运用到这些图标上了. 如下面是部分Fon

js--手机头像点击显示按钮的位置自适应

在手机页面的中,头像显示的div,第一行的最后一个为点击显示更多的按钮(more),因为手机宽度的大小不一致,所以每行显示的头像个数也不一致,more按钮的位置总是固定在最后一排,所以需要通过计算屏幕宽度的大小,然后根据每个li的大小算出一行中最多能放几个,然后在将more通过js插入,如下图 iPhone5 显示如下: iPhone6 显示如下: 一下贴代码: HTML <div class="pic"> <ul> <li><img src=

【学习笔记】bootstrap之CSS布局

CSS布局 1)使用Bootstrap的时候,所有的HTML文件都需要在其 顶部引用HTML5的DOCTYPE属性, <!DOCTYPE html> <html lang=“en”> … </html> 2)新版Bootstrap是一个移动先行的框架集,移动先 行的影子在整个框架集都可以发现,在移动设备浏览器上,通过为viewport meta标签添加的 user-scalable=no可以禁用其缩放(zooming)功能.禁用缩放 功能后,用户只能滚动屏幕 . 3)B