Jekyll Bootstrap이 글리프콘을 가져오지 않습니다.
-
20-12-2019 - |
문제
오늘부터 Jekyll을 사용하기 시작했는데 지금까지 마음에 듭니다.
저는 기본 테마(단순한 제목) 중 하나를 사용하고 있습니다. bootstrap-3
) 파일 구조 측면에서 잘 컴파일되는 것 같습니다.
그러나 로컬 서버(또는 github.io)에서 실행할 때 일부 파일, 특히 Bootstrap에 기본으로 제공되는 glyphicon 글꼴이 누락되었습니다.
그만큼 fonts
폴더가 두 폴더 모두에 존재합니다. _site/assets
디렉토리뿐만 아니라 외부 assets
디렉토리, 그리고 내가 아는 한 그 내용은 _site
디렉토리는 서버에서 제공되는 것입니다.
그런데 Google Dev Tools를 사용하여 자산을 검색하면 글꼴을 전혀 찾을 수 없습니다.CSS는 잘 생성되지만 글꼴은 그렇지 않습니다.
흥미롭게도 다른 테마(예: the-project
) 글꼴이 제대로 로드되었습니다.
내 안에 글리피콘이 존재해요 bootstrap.min.css
, 내가 생각할 수 있는 유일한 것은 url()
코드가 잘못되었습니다:
src:url('../fonts/glyphicons-halflings-regular.eot')
내 안에 있어 bootstrap.css
, 내 파일 구조는 상위 폴더에 다음이 포함되도록 설정되었습니다. fonts
폴더.
내 디렉토리 트리는 다음과 같습니다.
bootstrap-3
├── bootstrap
│ ├── css
│ │ ├── bootstrap.min.css
│ │ └── bootstrap.theme.min.css
│ ├── fonts
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ └── glyphicons-halflings-regular.woff
│ └── js
│ └── bootstrap.min.js
└── css
└── style.css
그리고 여기 내 출력 사이트가 있습니다, 글리피콘을 submit
연락처 페이지의 버튼(아직 UI에 초점을 맞추지 않았기 때문에 기본 사이트에는 표시되지 않음)
흥미롭게도 어딘가에 글리피콘을 놓으면 ~ 아니다 버튼에 표시됩니다.
편집하다:와, 실수로 넣었어 >
수업 이름에.
해결책
당신이 가면 http://getbootstrap.com 네트워크 검사기를 보면 어떤 글꼴도 로드되지 않는 것을 볼 수 있습니다.하지만 만약 당신이 간다면 http://getbootstrap.com/comComponents/, 브라우저에서 점프하는 것을 볼 수 있습니다.
브라우저는 필요한 경우에만 글꼴을 로드합니다. 글리피콘-xxx 스타일).이것은 ... 불리운다 지연 로딩 불필요한 리소스 로드를 방지합니다.
편집하다 :사이트에서 글리피콘을 사용하지 않으면 로드되지 않습니다.기본 Jekyll Bootstrap은 글리피콘을 사용하지 않습니다.
추가해 보세요 파일 중 하나(예:페이지.html) 또는 index.md에 해당하는 마크다운을 추가하면 네트워크 검사기에서 글꼴이 로드되는 것을 볼 수 있습니다.