나는 글꼴 최고 말대꾸 파일을 사용하고 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에 대한 몇 가지 팁을 얻을 수 있다면 충분히 굉장 할 것입니다.
감사.
답변
Sass는 실제로 어떤 클래스를 사용하고 있는지 전혀 모릅니다. 이것은 당신이 직접 손질해야 할 것입니다. 제공된 .scss 파일을 열고 필요하지 않은 것은 모두 해킹하십시오.
불필요한 글리프를 제거하기 위해 글꼴 파일 자체를 편집하려면 타사 응용 프로그램이 필요하며이 질문의 범위를 벗어납니다.
Fontello 는이 모든 것을 할 수있는 온라인 웹 서비스입니다. 여러 아이콘 글꼴 모음을 혼합하고 일치시켜 프로젝트에 적합한 글꼴 파일을 만들 수 있습니다. 사용자 정의 된 글꼴 파일 외에도 이미 생성 된 스타일이 포함 된 여러 .css 파일을 제공합니다 (확장자를 .scss로 변경하면 기존 Sass 프로젝트로 가져올 수 있음).
답변
fontello는 매우 좋지만 IcoMoon 은 훨씬 더 굉장합니다.
답변
답변
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의 출력 을 열어 파일에 붙여 넣어야합니다.
답변
글쎄, 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.
답변
Fontastic 은 나를 위해 일했습니다 ( Font Awesome github 페이지 에 나열되었습니다 ). 필요한 글리프를 선택하고 새 사용자 정의 글꼴로 다운로드하십시오. 훌륭한 도구입니다.
답변
Iconmoon은 나를 위해 일했습니다. 나는 font-awesome에서 svg 파일을 가져 와서 사용했기 때문에 사이트에서 사용할 수있는 아이콘뿐만 아니라 원하는 아이콘을 얻었습니다. 또한이 링크는 새로운 아이콘 https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/ 의 통합에 도움이되었습니다.
