부트 스트랩 3.0에서 글 리피 콘을 사용하는 방법

이미 부트 스트랩 2.3에서 글 리피 콘을 사용했지만 이제 부트 스트랩 3.0으로 업그레이드했습니다. 이제 아이콘 속성을 사용할 수 없습니다.

부트 스트랩 2.3에서는 아래 태그가 작동합니다.

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

부트 스트랩 3.0에서는 작동하지 않습니다.

아이콘 (glyphicons)는 지금에 포함되어 별도의 CSS 파일 ... .

마크 업이 다음과 같이 변경되었습니다.

<i class="glyphicon glyphicon-search"></i>

또는

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

다음은 Bootstrap 3의 유용한 변경 사항 목록입니다. http://bootply.com/bootstrap-3-migration-guide

됐습니다.

<i class="glyphicon glyphicon-search"></i>

추가 정보:

http://getbootstrap.com/components/#glyphicons

Btw. 이 변환 도구를 사용할 수 있으며 아이콘에 대한 코드도 업데이트됩니다.

사용자 정의 된 부트 스트랩 3 배포판을 다운로드하지 않는 경우 다음을 수행해야합니다.

1. https://github.com/twbs/bootstrap/archive/v3.0.0.zip 에서 전체 배포판을 다운로드 하십시오.
2. 호출 된 전체 폴더의 압축을 풀고 fonts부트 스트랩 디렉토리에 업로드하십시오 . 다른 폴더 "css, js"와 함께 넣으십시오.

이전 예 :

\css
\js
index.html

업로드 후의 예 :

\css
\fonts
\js
index.html

less를 사용하고 아이콘 글꼴을로드하지 않는 경우 글꼴 경로를 확인하고 variable.less 파일로 이동 하여 @ icon-font-path 경로를 변경해야 합니다 .

Bootstrap 3에는 i가 아닌 span 태그가 필요합니다.

<span class="glyphicon glyphicon-search"></span>`

글꼴 포함 모든 글꼴 파일을 CSS 근처의 / fonts 디렉토리에 복사합니다.

1. CSS 또는 LESS 포함 프로젝트에서 글꼴을 활성화하기위한 두 가지 옵션이 있습니다. 바닐라 CSS 또는 소스 LESS입니다. 바닐라 CSS의 경우 저장소 의 / css 에서 컴파일 된 CSS 파일을 포함하기 만하면됩니다 .
2. LESS의 경우 / less 의 .less 파일을 기존 부트 스트랩 디렉토리로 복사 하십시오. 그런 다음 @import "bootstrap-glyphicons.less" 를 통해 bootstrap.less 로 가져옵니다 . . 준비되면 다시 컴파일하십시오.
3. 아이콘을 추가하세요! 글꼴과 CSS를 추가 한 후 아이콘을 사용할 수 있습니다. 예를 들면<span class="glyphicon glyphicon-ok"></span>

출처

grunt를 사용하여 애플리케이션을 빌드하는 경우 빌드 중에 경로가 변경 될 수 있습니다. 이 경우 다음과 같이 grunt 파일을 수정해야합니다.

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },

부트 스트랩에서 모든 파일을 다운로드 한 다음이 CSS를 포함합니다.

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>

도움이 될 수 있습니다. 이해에 도움이 될 많은 예제가 포함되어 있습니다.

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp