bootstrap Glyphicons

Question

Bootstrap css使用Glyphicons的半身人。 如果我購買了他們的完整產品系列，我將如何將其整合到bootstrap框架中？

Answer 1

使用此CSS精靈生成器 ，上傳zip文件。 它將為您創建相關的CSS類（名稱來自圖像本身），將所有圖像合並到一個（透明）PNG中。

Answer 2

您還可以使用Font Awesome解決方案。

可縮放矢量圖形意味着圖標看起來很棒。

從頭開始設計，完全向后兼容Twitter Bootstrap 2.0。

Answer 3

您必須重新計算每個字形圖標的背景位置到您自己的類中，或者覆蓋已經由引導程序設置的類以便使用它們.Twitter的引導程序使用四分之一（免費）版本的圖標，它們是14px，全套的大小是原來的兩倍，所以舊的background-position's不起作用。

以下是一個bootstraps圖標類的示例：

/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
    background-position: -216px -72px;
}

/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    width: 14px;
} 

Answer 4

我還在Github上創建了一個。 直到之后才看到Marco的帖子。

https://github.com/ekryski/bootstrap-template

Answer 5

從我記得，Glyphicons沒有提供他們的圖標作為精靈版本（許多圖標作為一個圖像），而是你分別得到每個圖標。 如果你只計划使用他們的幾個圖標，這應該沒問題。

最好的方法是創建一個單獨的css文件並繼續使用它們的“.icon-”命名約定。

.icon-whatever {
   background:url('..img/someicon.png') 0 0; 
}

默認背景位置為14px 14px因此您需要將其重置為0 0就像我上面所做的那樣。

Answer 6

我為Bootstrap創建了一個sprite和CSS drop-in來提供這個功能。 回購和指令在Github上 。 並非每個圖標都有覆蓋范圍，有些圖標仍偏離偏心。 要使用更大的圖標，只需添加icon-large CSS類：

<i class="icon-large icon-search"></i>

Answer 7

這里有一篇很棒的關於Bootstrap Icons的文章： http ： //www.themplio.com/twitter-bootstrap-icons

Answer 8

無需加入它。 您可以添加glyphicons並將其與halflings引導程序一起使用。

添加glyphicons（常規集）如下：

/css/glyphicons.css 
/fonts/glyphicons-regular.eot 
/fonts/glyphicons-regular.svg 
/fonts/glyphicons-regular.ttf 
/fonts/glyphicons-regular.woff 
/fonts/glyphicons-regular.woff2

你應該給base-css-class： .glyphicons與bootstraps .glyphicon相同的樣式

.glyphicons {
    position:relative;
    top:2px; 
    display:inline-block;
    font-family:'Glyphicons Regular';
    font-style:normal;
    font-weight:normal;
    line-height:1;
    vertical-align:top;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

接下來，將glyphicons的引用添加到頁面中，如下所示：

<link href="/css/glyphicons.css" rel="stylesheet" />

現在，使用完整的“常規”字形和旁邊的半身：

<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>

<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>

其他答案很好，但請記住使用sprite-png時使用font-technique和舊技術的圖標之間的區別。 Png並不總是可伸縮的，因此有幾種尺寸。 此外，無法設置顏色。 為了與背景形成對比，可以在png上使用.white類從黑色切換到白色。 通過使用字體，像設置字體樣式一樣設置圖標的樣式：

.iconstyle {  color: blue;  font-size: 26px;  etc.. }

Answer 9

你可以使用我的解決方案。 將此行放在標題上的bootstrap link url css之后。

<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">

然后調用在線html代碼

<i class="icon-close icon-red"></i>&nbsp;Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i>&nbsp;Someting <!-- 32x32pix size color red -->

你可以在這里下載資產（圖片 - 圖標png和css都是zip）：

http://www.photonautes-associes.fr/utils/assets.zip享受:)

Answer 10

從官方引導程序頁面下載字體，然后將此代碼粘貼到CSS文件中

試試這段代碼

@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}

Answer 11

我以為我會把我的經驗添加到這個列表中。

在嘗試將Glyphicons All添加到我現有的迷宮式Bootstrap-riddled代碼庫時，有幾個障礙。 （其中，Glyphicons All使用構造“.glyphicons .glyphicons- [name]”和Bootstrap使用構造“.glyphicon .glyphicon- [name]”）。

我最終決定同時使用它們。 展望未來，我發現我越來越多地使用Glyphicons All構造，但Bootstrap構造仍適用於我現有的所有代碼。

是的，包括兩個“字體”增加了整體頁面的重量，但不是災難性的。

Answer 12

我做的很簡單，工作得很完美。 注意：如果您希望那些漂亮的glyphicons作為字體工作，就像我正在使用的bootstrap版本那樣。

1. 在glyphicons zip中，將/ glyphicons / web / bootstrap_example / fonts中的所有字體復制到您的引導字體當前在項目中的位置

2. 在glyphicons zip中，查看/web/bootstrap_example/css/glyphicons.css，將其全部復制並粘貼到您自己的less / css文件中。

3. 只要您自己的css / less文件正確覆蓋它們，此步驟可能是不必要的：在項目的bootstrap.css文件中，刪除@ font-face stuff，.glyphicon樣式和所有glyphicon個別內容標記（即.glyphicon- xxxx：在{content：...}之前。

4. 在包含所有新標簽的less / css文件中，執行查找並將“.glyphicons-”替換為“.glyphicon-”

那應該是它，除非我忘了簡單的事情。 對我來說很棒。

Answer 13

使用glyphicons classess ，例如：

`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`

我最喜歡的圖標字體是Fontello ，你可以下載你需要的圖標而不是整個包。