Twitter Bootstrap - 아이콘 사용

Twitter Bootstrap을 사용 중이고 아이콘 표시에 문제가 있습니다. 여기 예제 중 하나를 다시 시도하고있다 : 여기 http://fortawesome.github.io/Font-Awesome/#examples Twitter Bootstrap - 아이콘 사용

은 내 코드입니다 : 아이콘이 전혀 나타나지 않습니다

<head> 
    <meta charset="utf-8"/>  
    <script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
</head> 
<div class="control-group"> 
    <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> 
    <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> 
    <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> 
    <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p> 
</div>

; 어떤 아이콘 이미지 파일이나 그와 비슷한 것에 링크해야합니까? Firefox에서 테스트 중이지만 Font-Awesome 예제 사이트가 올바르게로드되므로 브라우저 선택이 문제가 아닌 것으로 확신합니다. 어떤 도움을 주시면 감사하겠습니다!

출처

2013-04-22 nsax91

font-awesome.min.css 내의 글꼴 파일 경로가 설정에 맞는지 확인하십시오. – Hoshts

글꼴 폴더 경로를 변경 했습니까? 그랬다면 폰트 CSS 파일을 업데이트해야합니다 –

파일에 대한 상대 URL을 사용하는 특별한 이유가 없다면 "절대"를 고수해야합니다 - 그런 식으로 전화를 걸면 어디에서나 찾을 수 있습니다. 예 :'/ assets/css/bootstrap.min.css' – nickhar

방화범 표시가 설치되어 있습니까? 설명에서 Net 탭의 404 오류를 확인해야합니다. 서버에있는 글꼴 파일을 올바른 위치에 두지 않았다고 추측합니다.

당신이 font-awesome.css의 첫 번째 몇 줄을 보면, 당신은 다음과 같은 정의가 나타납니다 :

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot?v=3.0.1'); 
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded- opentype'), 
     url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'), 
     url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

하는 서버에 CSS (which you can find here)에서 참조 된 파일을 다운로드해야합니다 및 아래에 배치를 에셋/글꼴.

출처

2013-04-22 22:38:21

글꼴 굉장한 "font"폴더를 "assets"폴더에 복사했는지 확인하십시오. 이 페이지에서 아이콘을 렌더링하는 글꼴 파일이 필요합니다

[class^="icon-"], [class*=" icon-"] { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
    display: inline; 
    width: auto; 
    height: auto; 
    line-height: normal; 
    vertical-align: baseline; 
    background-image: none; 
    background-position: 0% 0%; 
    background-repeat: repeat; 
    margin-top: 0; 
}

을 ../img/glyphicons-halflings.png

글꼴 최고 를 겹쳐 를 사용 트위터 부트 스트랩 "아이콘" ;)

출처

2013-04-23 04:50:41

Twitter Bootstrap - 아이콘 사용

답변

관련 문제