标签: glyphicons

您好，我正在尝试实现可在http://twitter.github.io/bootstrap/components.html#navs找到的导航列表。我已经查看了源代码，并尝试使用它们的代码和自己的代码：

        <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
            <li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#"><b>Arrays</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#"><b>Klasser</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>HTML5</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>CSS3</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>jQuery</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>AJAX</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>PHP</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>MySQL</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>Twitter Bootstrap</b><i class="icon-chevron-right"></i></a></li>
        </ul>
    </div>

我得到的结果是这样的：

如何将人字形摆在右边？尝试用偏移补偿，但是人字形的位置会根据弦的长度而有所不同。

我正在使用jsf,primefaces和bootstrap 3开发一个应用程序.

来自glyphicons的测试页面完美地显示在我的浏览器中,但是当我尝试使用web项目中的图标时,我只会得到奇怪的符号.

我最好的猜测是,glyphicons css文件无法找到字体,即使我将它们也复制到项目中并让相关部分相同:

    -resources
     -css
      -bootstrap.css
      -bootstrap-glyphicons.css
     -fonts
      -glyphicons-halflings.eot
      -glyphicons-halflings.otf
      -glyphicons-halflings.svg
       ...

如何确保css文件找到我的字体目录/修复此错误？

现在我正在尝试在list-group-item中插入glyphicon或按钮.我想要的是,当用户点击list-group-item中的任何位置时,它们会链接到某个页面,但是当他们单击glyphicon或按钮时,它们会链接到另一个页面.为什么我尝试这样做,它继续将glyphicon或按钮放在list-group-items框之外.为什么是这样？我怎样才能解决这个问题？

非常感激.

码:

<div class="list-group">
            <a href="my_django_url" class="list-group-item">
                            <a href="another_django_url"><span class="glyphicon some-glyphicon"></span></a>
            </a>

我对bootstrap glyphicon有一些问题.

我目前在我的项目中使用了很多glyphocon,但我不能全部使用它们.

我会试着更好地解释自己.

<span class="glyphicon glyphicon-th-large text-primary"></span>

这个,在我的网站上正常工作,但是:

<span class="glyphicon glyphicon-sunglasses text-primary"></span>

这不是.

我试着下载一个干净的bootstrap,我只需要取出字体文件夹并替换我项目中的文件.但没有改变.

我有一些随机的glyphicon这个问题,而不是所有这些问题.

我真的不知道为什么:/

Ps我已经尝试了这个:Bootstrap 3无法正确显示glyphicon

我有一个div房子glyphicon和一个img.图像是视频的缩略图,我想将播放图标垂直和水平放置在该缩略图的顶部.标记看起来像这样:

<div class="container">
    <div class="col-sm-12">
        <h2>{{video.title}}</h2>
        <p>{{video.description}}</p>
        <div class="video-thumbnail">  <--- ITEM OF INTEREST
            <i class="glyphicon glyphicon-play-circle"></i>
            <img ng-src="{{video.thumbnail}}" alt="{{video.title}}" class="img-thumbnail img-responsive center-block"/>
        </div>
    </div>
</div>

在less我已经应用,过去引导,如下所示:

featured-video {
  .video-thumbnail {
    text-align: center;

    &>.glyphicon-play-circle {
      font-size: 500%;
    }
  }
}

计算出来css的video-thumbnail样子如下:

box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: source-sans-pro, sans-serif;
font-size: 14px;
height: 818.328125px;
line-height: 20px;
text-align: center;
width: 1110px;

计算出来css的glyphicon样子如下:

-webkit-font-smoothing: antialiased; …

我有一个<input>元素,我无法修改它周围的HTML,但我想在其中添加一个glyphicon(<i class="glyphicons glyphicons-some-icon"/>).我希望用CSS做到这一点,但我似乎无法开始:after工作.我认为以下内容会生成该元素:

#my-input {
    content: attr(class, 'glyphicons glyphicon-some-icon'); 
    content: '<i/>'; 
}

但事实并非如此.任何了解:after更好的人都可以解释我如何能够产生所需的<i class="glyphicons glyphicons-some-icon"/>用途:after吗？

我有2个项目：Project1和Project2。

Project1使用react-bootstrap。Project1使用react-bootstrap的所有组件，并在react-bootstrap组件上创建包装器（不要问为什么，这是必需的）。Project2应该使用Project1（导出时）作为react-bootstrap的包装器库。

项目1- >

index.js：

import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
...
import Glyphicon from './src/components/Glyphicon';
...
export default {
...
Glyphicon,
...
};

src / components / Glyphicon.jsx：

import React, { PropTypes } from 'react';
import { RBGlyphicon } from 'react-bootstrap';

const Glyphicon = props => (
  <RBGlyphicon
    id={props.id}
    bsClass={props.clClass}
    glyph={props.glyph}
  />
);

Glyphicon.defaultProps = {
  id: undefined,
  clClass: 'glyphicon',
  glyph: undefined,
};

Glyphicon.propTypes = { …

我将以下 SVG 图标作为 a 嵌入到path我的 HTML 页面中：

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

如何将上面的 SVG 图标path作为 a包含class在 CSS 中？所以我可以attribute在我的 HTML 页面中使用它，如下所示：

<i class="chevron-right"></i>

更新：关于已接受的答案，我在使图标正确垂直居中时遇到了一些问题，最终找到了一个更简单的 CSS 代码：

.chevron-right {
    vertical-align: middle;
    content: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 …

我正在尝试使用bootstrap 中的datepicker (http://eternicode.github.io/bootstrap-datepicker/),一切正常,但没有任何字形显示.

我看到glyphicons被移动到bootstrap 3(http://glyphicons.getbootstrap.com/)下的另一个目录,这是我正在使用的,但我不知道如何集成它.

都

<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">

和

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012" readonly/>
     <span class="add-on"><i class="icon-th"></i></span>
</div>

没工作.

任何人都知道如何将bootstrap 3与twitter datepicker集成？

我有这个代码创建一些带有GlyphIcon和一些文本的Bootstrap 3按钮,但问题是文本在图标右侧对齐.如何对齐图标下方的文字？

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</button>
    <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-trash"></span>Delete</button>
</div>
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-share"></span>Resend</button>