我的客户端项目使用一些基本的HTML和CSS.但他们喜欢网站菜单上的Glyphicons.所以我只是尝试将Glyphicons包含在Bootstrap CSS中,但确实如此,但其他css在包含Bootstrap CSS后受到影响.

所以这个问题可能很愚蠢,我只想在没有bootstrap css的客户端网站菜单链接中包含Glyphicons.

这有可能先行吗？我知道Glyphicons free将与Bootstrap Package一起提供.

而其他的事情是我的客户不希望我包含Bootstrap CSS,因为它影响页面结构.

那么可以包含没有Bootstrap css的Glyphicons或我自己的自定义css吗？

任何帮助,将不胜感激!

我正在使用带有Glyphicons的优秀Twitter引导库,但是所有图标都呈现为空方块,如下所示:

我已将Glyphicons字体上传到我的网站根目录,并将bootstrap.css文件更改为指向正确的位置,我已经验证过,因为他们200 OK在Chrome的开发工具中有请求:

这是我正在使用的标记:

<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>

任何想法为什么字体可能呈现为空框？StackOverflow上的前一个答案都指向不正确的字体路径,这不是这里的路径是正确的.

我正在使用bootstrap的collapse.js来扩展和折叠rails应用程序中的一些输入组.我正在使用JS来确定是否扩展了组,并创建了CSS类来添加"+"或" - "以显示它是打开还是关闭:

打开:

关闭:

从CSS中可以看出,我正在使用背景图像,这是我的图像中的一个png:

.expandable {
  background: url('/assets/plus.png');
  padding-top: 4px;
  width: 400px;
  height: 30px;
  background-repeat: no-repeat;
  padding-left: 55px;
  display: block;
}

.expanded {
  background: url('/assets/minus.png');
  padding-top: 4px;
  width: 400px;
  height: 30px;
  background-repeat: no-repeat;
  padding-left: 55px;
  display: block;
}

我想使用glyphicon-plus和glyphicon-minus而不是这些.png文件.

实现这一目标的最佳方法是什么？

更新:

为了获得正确的样式,我将CSS更改为:

.expandable {
  height:40px;
  width:50%;
  margin:6px;

}

.expandable:before{
  content:"\2b";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:5px;

}

.expanded {
  height:40px;
  width:50%;
  margin:6px;
}

.expanded:before{
  content:"\2212";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:5px;

}

作为参考,我的HTML是:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <p1 …

我使用Google Chrome Inspector,如果您选择glyphicon的伪伪,您会看到右侧有空白区域.我如何将glyphicon中心化？

我试图设置文本对齐但它不起作用.

<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>

的jsfiddle

更新了链接jsFiddle 2

如果我在文档的head标记中添加以下Google字体

<link href="http://fonts.googleapis.com/css?family=Muli|Dosis:500,400|Open+Sans" rel="stylesheet">

Bootstrap图标(Glyphicons)略微向上,您可以在此链接中看到:http://www.acarrilho.com/wp-content/uploads/2012/07/icon_off.png

我该如何解决这个问题？

我需要生成一个按钮(不是一组按钮),结构如下:

左侧:[glyphicon] center:文字

例如:https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png

这是我做的:

<div class="row btn-custom">
        <div class="btn-group btn-group-lg col-xs-12" >
          <button class="btn btn-success col-xs-1"><span class="glyphicon glyphicon-earphone"></span></button>
          <button class="btn btn-success col-xs-10">Call Us</button>
          <button class="btn btn-success col-xs-1"></button>
        </div>
      </div>

CSS:

.btn-custom {
    margin-bottom: 5px; 
}

.btn-custom button { 
    border-left:none; 
    height: 50px;
}

问题是,在非常小的屏幕上,他们开始堆叠,看起来不像一个按钮.有没有更好的方法来实现这一目标？

• 此代码仅用于移动网站(m.*url),所以请不要建议我做其他事情,我知道我在做什么.

谢谢!!!

我想在字形图标上绘制一条斜线,或者从font-awesome中绘制一个图标.例如,我想在此图标上添加斜线,因为"​​没有wifi可用.

<i class="fa fa-signal"></i>

我尝试用堆叠来做,但为此我需要一个斜线的图标.

<div class="fa-stack fa-lg">
    <i class="fa fa-signal fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x text-danger"></i>                
</div>
Wi-Fi

是否有更简单的方法在信号图标上设置斜杠？

我在开发我的网站时看到过这种情况,有时我的字形不能正确呈现并显示不同的图标.我最近得到了一些关于我的购物车和搜索按钮的报告,显示为锤子和嘴唇.我正在使用bootstrap v3.3.4并使用绝对路径将字体存储在我的服务器上.我在FireFox中看到过这种情况,并在Safari中获得了移动报告.任何人都有这个问题,或者想知道为什么会这样？

我要补充一点,当我记得看到这个时,我刷新了页面或清除了我的缓存并修复了问题.但我的客户想要一个更好的答案,而不是只是刷新页面.

我无法在bootstrap实现的网页中使用社交媒体字形图标.我能够使用像搜索,地球等常见的那些.

这是我使用通常的方式:

<span class="glyphicons glyphicons-search"></span>

如何为社交字形实现上述方法？

问题

我想在文本后面显示一个glyphicon图标.在文档中,您可以在此处看到之前的示例:http://getbootstrap.com/components/#glyphicons-examples

<div class="glyphicon glyphicon-chevron-right">Next</div>

我的解决方案

解决方案1

<div>Next<span class="glyphicon glyphicon-chevron-right"></span></div>

解决方案2

#next.custom-chevron-right:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

<div id="next" class="glyphicon custom-chevron-right">Next</div>

来源示例:bootply

我的问题

有没有更好的方法只使用bootstrap类？