부트 스트랩 글 리피 콘

부트 스트랩 글 리피 콘

---

부트 스트랩 CSS는 Glyphicons 의 하프링을 사용합니다 . 전체 제품 라인을 구입했다면 어떻게 부트 스트랩 프레임 워크에 통합 할 수 있습니까?

---

모든 글리프 아이콘의 배경 위치를 자신의 클래스로 다시 계산하거나 부트 스트랩에서 이미 설정 한 클래스를 덮어 써야 작업 할 수 있습니다. Twitter의 부트 스트랩은 전체적으로 14px 인 아이콘의 하프링 (무료) 버전을 사용합니다. 전체 세트는 크기가 두 배이므로 오래된 background-position's것은 작동하지 않습니다.

다음은 부트 스트랩 아이콘 클래스 중 하나의 예입니다.

/* 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;
} 

---

이 CSS 스프라이트 생성기를 사용 하여 zip 파일을 업로드하십시오. 모든 이미지를 하나의 (투명한) PNG 이미지로 병합하여 관련 CSS 클래스를 생성합니다 (이름은 이미지 자체에서 가져옴).

---

Font Awesome 솔루션을 사용할 수도 있습니다 .

확장 가능한 벡터 그래픽은 아이콘이 어떤 크기에서도 멋지게 보입니다.

Twitter Bootstrap 2.0과 완전히 역 호환되도록 처음부터 설계되었습니다.

---

나는 또한 Github에서 하나를 만들었습니다. 이후까지 위의 Marco의 게시물을 보지 못했습니다.

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

---

내가 기억하는 바에 따르면 Glyphicons는 아이콘을 스프라이트 버전으로 제공하지 않습니다 (여러 아이콘이 하나의 이미지로 표시됨). 대신 각 아이콘을 개별적으로 가져옵니다. 아이콘 몇 개만 사용할 계획이라면 괜찮습니다.

가장 좋은 방법은 별도의 css 파일을 만들고 ".icon-"명명 규칙을 계속 사용하는 것입니다.

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

기본 배경 위치는 위와 같이 14px 14px재설정해야합니다 0 0.

---

이 기능을 제공하기 위해 Bootstrap 용 스프라이트 및 CSS 드롭 인을 만들었습니다. 저장소 및 지침은 Github에 있습니다. 아직 모든 아이콘에 적용 범위가있는 것은 아니며 일부는 여전히 중앙에서 약간 벗어납니다. 더 큰 아이콘을 사용하려면 icon-largeCSS 클래스를 추가하면 됩니다.

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

---

여기에 Bootstrap 아이콘에 대한 훌륭한 기사가 있습니다 : http://www.themplio.com/twitter-bootstrap-icons

---

통합 할 필요가 없습니다. 글 리피 콘을 추가하고 하프링 부트 스트랩과 함께 사용할 수 있습니다.

다음과 같이 글 리피 콘 (일반 세트)을 추가합니다.

/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부트 스트랩과 동일한 스타일을 제공해야합니다..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
}

다음으로 다음과 같이 글 리피 콘에 대한 참조를 페이지에 추가합니다.

<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>

The other answers are fine but keep in mind the difference between icons with the font-technique and the older technique when using sprite-png's. Png's are not always scaleable and therefore comes with several sizes. Also, the color can not be set. To contrast with the background, the .white class can be used on png's to switch from black to white. By using fonts, style the icons as you would style a font:

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

---

You could use my soluce. Put this line after bootstrap link url css on your header.

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

Then to call online html code

<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 -->

You could download here the assets (images-icons png and css both in zip) :

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

---

Download fonts from official bootstrap page and then paste this code as is in your CSS file

Try This code

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

---

I thought I'd add my experience to the list here.

There were several obstacles for me when trying to add Glyphicons All to my existing, labyrinthine, Bootstrap-riddled codebase. (Among them, Glyphicons All uses the construction ".glyphicons .glyphicons-[name]" and Bootstrap uses the construction ".glyphicon .glyphicon-[name]").

I ultimately decided to just use them both, in parallel. Going forward, I find I'm using the Glyphicons All construction more and more, but the Bootstrap construction still works for all of my existing code.

Yes, including both "fonts" adds to the overall page weight, but not disastrously.

---

What I did was pretty simple and worked perfectly. NOTE: this is if you want those beautiful glyphicons working as fonts, as the bootstrap version I'm using does.

1. In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project

2. In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.

3. This step may be unnecessary as long as your own css/less file overwrites them properly: In your project's bootstrap.css file, remove @font-face stuff, .glyphicon styles, and all the glyphicon individual content tags (i.e, .glyphicon-xxxx:before { content: ... }).

4. In your less/css file with all the new tags, do a find and replace ".glyphicons-" replace with ".glyphicon-"

That should be it, unless I'm forgetting something simple. Works great for me.

---

Use glyphicons classess, example:

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

My favourite icon fonts is Fontello, you can download icons you need instead of whole package.

참고URL : https://stackoverflow.com/questions/9486443/bootstrap-glyphicons