사용 된 클래스에 대해서만 Font Awesome 최적화

86

나는 글꼴 최고 말대꾸 파일을 사용하고 https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass를 가하도록 _font-awesome.sass을 내가 할 수있는, 그래서 @import내 말대꾸 프로젝트. 또한 http://middlemanapp.com/ 을 사용하여 Sass 를 Css 로 변환 합니다. 질문 :

사용 된 아이콘 클래스 만 변환 된 .css로 가져 오는 방법이 있습니까? 지금은 _font-awesome.sass의 모든 클래스를 전달했기 때문입니다.
보너스 : 사용 된 아이콘 클래스 를 사용 하여 어떻게 든 글꼴 을 다시 컴파일 하여 프로덕션 용도로 더 작게 만들 수 있습니까?

위의 # 1에 대한 몇 가지 팁을 얻을 수 있다면 충분히 굉장 할 것입니다.

감사.

css sass font-awesome

— HP.
소스

csslint는 사용하지 않는 클래스를 찾는 데 도움이되므로 최소한 수동으로 수행 할 필요는 없습니다. 자동화 ... 당신은 아마 자신을 구현해야 할 것입니다,하지만 당신은 자신의 롤 수는 GitHub의에 또한의

— 알버트

2

Sass가 어떤 클래스를 사용하고 있는지 어떻게 알기를 기대합니까? 이 웹 사이트는 다양한 아이콘 글꼴에서 사용자 정의 글꼴 파일을 생성 할 수 있습니다. fontello.com

— cimmanon

@cimmanon 아래에 답변을 게시하지 않는 이유는 무엇입니까? 나는 fontello.com을 사용해 왔고 그것이 내가 찾던 것입니다.

— HP.

89

Sass는 실제로 어떤 클래스를 사용하고 있는지 전혀 모릅니다. 이것은 당신이 직접 손질해야 할 것입니다. 제공된 .scss 파일을 열고 필요하지 않은 것은 모두 해킹하십시오.

불필요한 글리프를 제거하기 위해 글꼴 파일 자체를 편집하려면 타사 응용 프로그램이 필요하며이 질문의 범위를 벗어납니다.

Fontello 는이 모든 것을 할 수있는 온라인 웹 서비스입니다. 여러 아이콘 글꼴 모음을 혼합하고 일치시켜 프로젝트에 적합한 글꼴 파일을 만들 수 있습니다. 사용자 정의 된 글꼴 파일 외에도 이미 생성 된 스타일이 포함 된 여러 .css 파일을 제공합니다 (확장자를 .scss로 변경하면 기존 Sass 프로젝트로 가져올 수 있음).

— Cimmanon
소스

fontello는 아이콘의 클래스 이름을 자동으로 변경합니다.이를 방지 할 수있는 방법이 있습니까?

— Adam

Fontello에는 누락 된 아이콘이 있습니다. No React, JavaScript, Node.js, Java, 예를 들어

— Green

44

fontello는 매우 좋지만 IcoMoon 은 훨씬 더 굉장합니다.

— TasDiam
소스

1

IcoMoon을 사용하면 자신 만의 글꼴을 가져올 수 있습니다. Fontello는하지 않습니다

— jscripter 2014-12-02

1

IcoMoon은 Font Awesome 아이콘의 일부만 지원한다는 것을 알았습니다.

— Tony O'Hagan

1

@ TonyO'Hagan 로컬 파일 시스템에서 Font Awesome 글꼴 파일을 가져올 수 있습니다.

— L_K

IcoMoon에 아이콘이 없습니다. 아니오, 예를 들어, 자바 스크립트, Node.js를, 반작용 없습니다

— 녹색

2

참고로 Font Awesome 아이콘을 IcoMoon으로 가져올 때 일부 아이콘이 항상 중앙에 있지 않을 수 있습니다. Inkscape에서 Font Awesome 글꼴 파일을 열면 다음을 볼 수 있기 때문에 IcoMoon이 아닌 글꼴 파일에 문제가있는 것 같습니다. 일부 아이콘이 잘못 정렬되어 있습니다 (브라우저로 출력 할 때 올바르게 표시되지만). 해결책은 IcoMoon의 글리프 편집 컨트롤을 사용하여 캔버스 너비를 줄이고 아이콘을 중앙에 배치하는 것 같습니다.

— 노엘 Whitemore

11

이제 프로덕션 용도로 Font-awesome의 하위 집합 아이콘을 사용할 수 있습니다. 현재 Font-awesome (v3.0.2) 버전에서 필요한 아이콘 만 선택하고 패키지화 할 수있는 icnfnt 라는 공식 하위 설정 도구 가 있습니다.

사용자 정의 다운로드에는 모든 CSS, LESS, SCSS 및 SASS 코드도 포함됩니다!

— Nickhar
소스

8

그 도구가 공식 자격이 될지 모르겠습니다

— Alex W

6

SASS가 아닌 LESS를 사용하므로 구현을 조정해야 할 수도 있습니다.

환경:

멋진 글꼴 4.5.0 (현재 버전)
Ubuntu 14.04 LTS
세게 때리다

이를 사용하여 필요한 유니 코드 문자 번호 목록을 생성하십시오.

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

그런 다음 사용자 정의 하위 설정을 선택하는 전문가 모드에서 FontSquirrel과 함께 사용합니다. http://www.fontsquirrel.com/tools/webfont-generator

유니 코드 범위에서 위의 값을 쉼표로 구분하여 입력합니다.

그런 다음 CSS에서 불필요한 항목을 제거하려면 :

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

less/font-awesome/icons.lessgrep의 출력 을 열어 파일에 붙여 넣어야합니다.

— 미셸 차체 바
소스

2

글쎄, sass는 선택자를 %기반 으로 만들기 위해 약간 흔들릴 수 있으므로 확장 가능합니다. 이 작업이 완료되면 원하는 아이콘과 일치하도록 클래스를 만든 다음 @extend글꼴 멋진 클래스 를 만들 수 있습니다.

개인적으로이 작업을 수행하고 실제로 마크 업의 클래스를 사용하지 않고 관련 요소 @extend와 이러한 클래스에 선택기를 사용 합니다.

예:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

그런 다음 scss에서

a.search {
    @extend %fa;
    @extend %fa-search;
}

Et voila.

— 디자이너
소스

2

Fontastic 은 나를 위해 일했습니다 ( Font Awesome github 페이지 에 나열되었습니다 ). 필요한 글리프를 선택하고 새 사용자 정의 글꼴로 다운로드하십시오. 훌륭한 도구입니다.

— mp31415
소스

Fontastic 아무것도 보여 선행 등록을해야합니다

— 녹색

내가 기억하는 한 1 년 전에는 그렇지 않았습니다. 슬퍼.

— mp31415

1

그냥 사용 mailinator을 이 계정을 만들 수 있습니다. 아이콘 내보내기에 완벽하게 작동했습니다.

— ppires

0

Iconmoon은 나를 위해 일했습니다. 나는 font-awesome에서 svg 파일을 가져 와서 사용했기 때문에 사이트에서 사용할 수있는 아이콘뿐만 아니라 원하는 아이콘을 얻었습니다. 또한이 링크는 새로운 아이콘 https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/ 의 통합에 도움이되었습니다.

— guru_laghima
소스