标签: glyphicons

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

这是我使用通常的方式:

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

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

我正在使用twitter bootstrap,我对他们主页中使用的glyphicon有疑问.有关参考,请参阅Base CSS页面:http://twitter.github.com/bootstrap/base-css.html

在左侧,您可以看到导航 - 排版,代码,表格等.现在,如果您注意到,导航包含由"icon-chevron-right"类标识的glyphicon.但是,图标不是黑色或白色.它是灰色的.当鼠标悬停在特定项目上时,图标会变成较暗的灰色阴影.CSS没有显示任何不寻常的东西,似乎引用了黑色glyphicon,但图标是灰色的并且具有悬停效果.

知道引导程序的哪个功能在这里使用？

我在我的项目中使用Bootstrap 3,我使用FontAwesome图标库而不是捆绑的Glyphicons.

问题是我有一些依赖Glyphicons的第三方组件,我不想改变他们的HTML.

我通过Bower和SASS + Compass(SCSS)包括字体真棒.

是否可以在不更改HTML和应用其他CSS类的情况下用FontAwesome替换Glyphicons？

为什么这些有用的gliphicons像素化,即使在W3Schools自己的网站上？我正在尝试使用这些并遇到同样的问题.请参阅glyphicon-search作为示例.

我尝试过旋转,抗锯齿等.没有任何作用.

如果它在W3Schools自己的网站上显示如此 - 这是一个"功能"吗？我应该使用其他一些小图标吗？这是一个例子 - 正确的是一个真正的问题:

我正在使用React Bootstrap的Glyphicon组件,但没有一个字形显示.到目前为止,这是我的代码:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Global from './components/Global';

ReactDOM.render(
    <Global />, 
    document.getElementById('root')
);

Global.js

import React, { Component } from 'react';
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';

class Global extends Component {
    render() {
        return(
          <div>
            <h2> Book Explorer!</h2>
              <FormGroup>
              <InputGroup>
                <FormControl
                  type="text"
                  placeholder="Search for a book"
                />
              <InputGroup.Addon>
                <Glyphicon glyph="search"></Glyphicon>
              </InputGroup.Addon>
            </InputGroup>
            </FormGroup>
          </div>
        )
    }
}

export default Global;

这是我的package.json档案:

{
  "name": "setup",
  "version": …

我正在使用带有Sass的Bootstrap 4进行​​Angular 4项目,我想使用glyphicons但是当我使用以下代码时:

<button class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span>Like</button>

例如,在制作"喜欢"按钮时,图标不会显示.

我配置项目以使用ng-serve命令编译SCSS样式表,我angular-cli.json看起来像这样:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "front-end-informatorio"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss"

      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json", …

是否可以像使用Font Awesome的图标一样使用Bootstrap"堆叠"默认的glyphicons？Glyphicons可以这样做:http://fortawesome.github.io/Font-Awesome/examples/#stacked还是我必须自定义编码？

谢谢!

我使用Bootstrap 3.0.3 glyphicons.在桌面浏览器和Android设备上都可以.我的问题是关于Apple设备(在运行iOS7的iPhone和iPad上测试过).

glyphicons看起来像表情符号.我发现了一些问题,但没有回答我的问题.

以下是查看屏幕截图的链接:http://www.fredericblancheton.fr/imgdisallow/image.png

谢谢您的帮助.

我在django中使用bootstrap,它适用于所有其他引导类,除了图标类,如: class="glyphicon glyphicon-download-alt"

右下角有错误的快照:

包含bootstrap.min.css文件时的快照:

在执行检查元素时,它包含所有字形,其快照是 -

只有http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css在我的html文件中链接它才有效; 但如果我把bootstrap.min.css我的电脑包括在内,它就无法工作.否则,每个bootstrap类都可以正常工作.希望你能理解我的问题.提前致谢.

对于我目前的工作流程,我使用Icomoon生成的标志性网页字体.这是一种非常简单有趣的技术,具有明显的优势:

• 图标的行为就像任何其他的字形,所以任何文字CSS变换可以以自然的方式,如适用于它text-shadow,text-decoration,color等.
• 易于重用,只需添加font-family元素.

但它有重大缺陷不让我入睡.

• 无论曲线如何与像素网格对齐,字体图标都是模糊的.更不用说糟糕的Windows渲染.
• 很难在字体中添加新的图标,特别是当制作矢量源字体不可用甚至丢失时.
• 它需要大量不同的字体版本(woff,eot,ttf)才能获得可接受的跨浏览器支持.
• 最后,字体根本不适用于图形(特别是不是单色),似乎不是<span class="icon"></span>为此目的使用虚拟空和非语义的正确方法.

嗯,显而易见的替代方案是SVG,它没有提到的缺点.但是它有自己的缺点,不容易让我使用它.

• 在我们的HTTP/1.1时代,很多小文件都是不可接受的.
• 创建图标修改并不是一件容易的事,需要手动编辑,这对我们的just-type-npm-install时代来说也很奇怪.

我已经搜索了一些npm软件包,由于某些原因我不满意.

所以,我问你的建议如何管理这个简单而常规的任务.是否有生产和可靠的方法来生成SVG精灵与旧浏览器的原始图标和位图后备的修改变体？