[英]icon-arrow-right now showing up in my project from a sample at jsfiddle
I copied a bootstrap tab control sample project from jsfiddle at 我从jsfiddle复制了一个引导选项卡控件示例项目,网址为
bootstrap tab control sample with dropdown menus --- 具有下拉菜单的bootstrap选项卡控件示例 -
to my local workstation as a .htm project (I am Not using visual studio here -- running win7 IE 11). 作为.htm项目连接到我的本地工作站(我在这里不使用Visual Studio-运行win7 IE 11)。 I added (downloaded) all the referenced .css/.js files referenced in this sample project. 我添加(下载)了此示例项目中引用的所有引用的.css / .js文件。 The sample project is working on my workstation. 该示例项目正在我的工作站上工作。 I even get the down caret on the 2nd menu (tab) item. 我什至在第二个菜单(选项卡)项上出现了插入符号。 but the submenu in the actual sample displays an icon-arrow-right (for an additional submenu). 但是实际示例中的子菜单显示一个右箭头图标(用于其他子菜单)。 This icon-arrow-right is not showing up on my work station. 此图标右箭头未显示在我的工作站上。
I tried another sample project from jsfiddle using VS2015 which used glyphicons. 我使用VS2015使用了glyphicons从jsfiddle尝试了另一个示例项目。 I got that working, so I copied the font folder from the VS project to my html project folder and tried using glyphicon-arrow-right in the htm project and referenced bootstrap.min.css but still no arrow-right. 我可以正常工作,因此我将字体文件夹从VS项目复制到了html项目文件夹,并尝试在htm项目中使用glyphicon-arrow-right,并引用了bootstrap.min.css,但仍然没有向右箭头。 I tried a variety of things based on other posts regarding the same problem -- but no luck. 我根据有关相同问题的其他帖子尝试了各种方法-但没有运气。
How can I get that icon-arrow-right to show up on my sample project on win7 IE11? 如何在Win7 IE11上的示例项目中显示图标右箭头?
Here's the html code I'm using 这是我正在使用的html代码
html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css">
<!--<script type="text/javascript" src="bootstrap-2.0.2.js"></script>-->
<script type="text/javascript" src="bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="result-light.css">
<link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<!--<link rel="stylesheet" type="text/css" href="bootstrap-glyphicons.css">-->
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
.glyphicon-nonescaped.glyphicon-arrow-right:before {
content: "\e092";
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<!--<a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>-->
<a href="#">2-level Dropdown <i class="glyphicon glyphicon-arrow-right glyphicon-nonescaped"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" id="menu1">
<li>
<a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
<li class="dropdown">
<a href="#">Menu</a>
</li>
</ul>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "2Smgv"
}], "*")
}
</script>
</body>
</html>
When I opened up the debugger I saw that this line of CSS set the URL of that image: 当我打开调试器时,我看到这行CSS设置了该图像的URL:
.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#333333;text-decoration:none;}
[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat;margin-top:1px;}
This is from bootstrap-combined.min.css line 381 这是来自bootstrap-combined.min.css行381
I believe you need to update the url to: 我相信您需要将网址更新为:
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/img/glyphicons-halflings.png or whatever path is relevant to that given symbol. http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/img/glyphicons-halflings.png或与该给定符号相关的任何路径。 It seems as though only a partial piece of the URL to the image is being presented. 似乎只显示了图像的一部分URL。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.