Nice programing

부트 스트랩 3 Glyphicons CDN

nicepro 2020. 10. 9. 12:20
반응형

부트 스트랩 3 Glyphicons CDN


주의!

이 풀 리퀘스트 병합 후에 부트 스트랩 아이콘이 돌아 옵니다 .


지난 몇 주 동안 이것을 앞뒤로 진행 한 후 Glyphicons 아이콘 글꼴을 기본 저장소복원 하기로 결정했습니다 . UI에서 아이콘이 얼마나 널리 퍼져 있는지를 감안할 때 CSS 및 JS와 같은 위치에 아이콘 (또는 다른 아이콘 글꼴)을 포함하지 않는 것은 대부분의 사람들에게 해가 될 것입니다.

이 업데이트에는 다음이 제공됩니다.

  • 문서 복원 (구성 요소 페이지)
  • 아이콘 글꼴을 유연하게 추가 및 제거하기위한 새 변수 @icon-font-path@icon-font-name,
  • 최신 Glyphicons로 업그레이드 (새 아이콘 40 개 추가)
  • CSS 페이지에서 이전 Glyphicons 언급을 제거합니다.

앞으로 아이콘 글꼴의 사용자 지정을 개선하여 글꼴 라이브러리를 더 쉽게 교체 할 수 있도록 노력할 것입니다 (원래 제거의 전체 동기였습니다).


새 버전의 Twitter Bootstrap Glyphicons의 CDN URL은 무엇입니까?

Bootstrap 3 에서 별도의 저장소로 이동 했지만 CDN을 찾지 못했습니다.

공식 문서에서 :

Bootstrap 3의 출시와 함께 아이콘이 별도의 저장소로 이동되었습니다. 이것은 기본 프로젝트를 가능한 한 간결하게 유지하고 사람들이 아이콘 라이브러리를 쉽게 교체 할 수 있도록하며 Glyphicons 아이콘 글꼴을 부트 스트랩 외부의 더 많은 사람들이보다 쉽게 ​​사용할 수 있도록합니다.

공식 웹 사이트 들은 아이콘의 CDN URL을 제공하지 않습니다.

어디에서 찾을 수 있습니까? 저장소를 다운로드하여 프로젝트에 포함하고 싶지 않습니다.


최근 부트 스트랩 3 릴리스 와 글 리피 콘이 메인 부트 스트랩 저장소로 다시 병합됨에 따라 부트 스트랩 CDN 은 이제 Glyphicons를 포함한 완전한 부트 스트랩 3.0 CSS를 제공하고 있습니다. 부트 스트랩 CSS 참조는 포함해야하는 모든 것입니다. Glyphicons와 그 종속성은 CDN 사이트의 상대 경로에 있으며 bootstrap.min.css.

HTML에서 :

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

CSS에서 :

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

다음은 작동하는 데모 입니다.

참고 사용한다는 것을 .glyphicon대신 클래스를 .icon:

예:

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

또한bootstrap.min.js Bootstrap JavaScript 구성 요소를 사용 하려면 여전히 포함해야합니다 . URL Bootstrap CDN참조 하세요.


Glyphicons를 별도로 사용하려면 Bootstrap CDN 에서 Glyphicons css를 직접 참조하면 됩니다.

HTML에서 :

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

CSS에서 :

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

이후 css파일이 이미 (부트 스트랩 CDN 사이트에서 상대 경로에있는) 모든 필요한 Glyphicons 종속성을 포함의 추가 css파일은 Glyphicons 사용을 시작하려면 어떻게이 전부입니다.

다음은 부트 스트랩이없는 Glyphicons 의 작동 데모 입니다.


대안은 아이콘에 Font-Awesome 을 사용하는 것입니다 .

Font-Awesome 포함

CDNJS에서 Font-Awesome을 열고 최신 버전의 CSS URL을 복사합니다.

<link rel="stylesheet" href="<url>">

또는 CSS에서

@import url("<url>");

예 (버전이 변경됨) :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

용법:

<i class="fa fa-bed"></i>

그것은 많은 아이콘을 포함 합니다 !


Bootstrap CDN이 glyphicon을 bootstrap.min.css로 복원했지만 Bootstrap CDN의 Bootswatch css 파일에는 glyphicon이 포함되어 있지 않습니다.

예를 들어 Amelia 테마 : http://bootswatch.com/amelia/

기본 Amelia는 다음 파일에 글 리피 콘을 가지고 있습니다 : http://bootswatch.com/amelia/bootstrap.min.css

그러나 Bootstrap CDN의 css 파일에는 glyphicon이 포함되어 있지 않습니다. http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

So as @edsioufi mentioned, you should include you should include glphicons css, if you use Bootswatch files from the bootstrap CDN. File: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

참고URL : https://stackoverflow.com/questions/18222849/bootstrap-3-glyphicons-cdn

반응형