웹 아이콘에 대한 7 가지 전문가 팁으로 사용법 및 이점

웹 사이트에 설정된 아이콘과 어떤 것을 선택해야하는지 궁금하십니까? 이러한 전문가 팁은 많은 전문 웹 개발자가 이미 알고있는 것에 대해 확신을 줄 수 있습니다. 아이콘을 하나씩 찾아서 어떻게 든 일관성을 유지할 수있는 방법을 찾는 것보다 포함 된 아이콘 세트에서 아이콘을 검색하는 것이 훨씬 쉽습니다.

우리는 커뮤니티에 아이콘 세트 사용에 대한 최상의 팁을 요청했으며 많은 사람들이 인기있는 Font Awesome 아이콘 세트 사용에 동의했지만 시장에서 사용할 수있는 유일한 아이콘 세트는 아닙니다.

어떤 아이콘 세트를 사용하고 있습니까? 의견을 들려주세요!

 웹 사이트에 특정 아이콘 세트를 사용하고 있습니까? 특정 용도 (예 : Shopify, 뉴스 레터 등)에 Font Awesome을 사용하고 있습니까? 그렇다면 왜 사용하고 있으며 아이콘 세트에 대한 경험이 무엇입니까? CDN을 사용 했습니까? 사용량이 개선 된 것을 보셨습니까?

Jeff Roscher : 고객이 현대적이고 매력적인 스타일을 추가합니다.

eWorkOrders.com에서 Font Awesome을 사용합니다. 이 회사는 마케팅 사이트 및 SAMS (Software as a Service) 제품인 CMMS (Computerized Maintenance Management System)의 일부입니다. 마케팅 사이트에는 잠재 고객이 현대적이고 매력적인 스타일을 멋지게 추가합니다. 흥미로운 인터랙티브와 마우스 오버 이벤트를 추가하여 더욱 인터랙티브하고 흥미 진진하게 만들었습니다. 고객의 경우 Font Awesome 아이콘은 입력 필드 내부의 시각적 신호로 사용되어 날짜 필드의 달력 아이콘, 전자 메일 주소 필드의 봉투 또는 전자 메일 주소 필드의 전화 아이콘과 같이 입력해야하는 데이터 유형을 식별하는 데 도움이됩니다. 전화 번호 입력란입니다. 편집, 복사 및 인쇄와 같은 기능 버튼에 사용됩니다.

아이콘은 기한이 지난 작업 지시서 옆에 또는주의가 필요한 경우 빨간색 느낌표 아이콘과 같은 데이터에 대한 빠른 시각적 정보를 제공하는 데 사용됩니다. 그들은 프로그램을 더 멋지게 보이게하기 위해 몇 가지 다른 장소에 있습니다.

폰트 굉장했습니다! CDN은 빠르며 필요한 모든 종류의 아이콘에 대한 많은 옵션이 있습니다. 우리는 결코 실망하지 않았습니다.

Rachel Foley : 대규모 아이콘 라이브러리에 쉽게 액세스 할 수있는 저렴한 방법

내 고객지도에서는 다음을 포함하여 모든 마케팅 채널과 제품에 대한 아이콘을 그리기 위해 Font Awesome을 전적으로 사용합니다.

• 웹 사이트
• 이메일
• 소셜 미디어
• 커스텀 그래픽
• 모바일 앱
• 웹앱

Font Awesome을 사용하면 대규모 아이콘 라이브러리에 쉽게 액세스 할 수 있습니다. 스타일은 우리 브랜드와 어울리는 장난스러운 측면에 있습니다. 또한, 다양한 무게와 스타일의 아이콘을 사용할 수있는 능력은 우리에게 자유를줍니다.

우리는 제품 사용자 경험 전체에서 매우 일관된 느낌을 줄 수있는 응용 프로그램에 CDN을 사용합니다. 또한 필요할 때 업그레이드가 매우 간단합니다. 마케팅 자료를 통해 우리는 좀 더 유연하며 로컬 설치 및 벡터 버전 인 CDN을 혼합하여 사용합니다.

우리가 1 월에 완전히 채택한 이래로 FA는 항상 우리에게 신뢰할 만했습니다.

Andrew Ruditser : Font Awesome이 업그레이드됨에 따라

Font Awesome is used on all our sites since the dawn of time. When we first started working with Font Awesome, it was mainly used for their 소셜 미디어 Icons. As Font Awesome upgraded, so did we. Not only are their phone icons fantastic, we enjoy the comical icons that they offer. As of recent, Font Awesome announced their version 6 icons. To us, this shows that Font Awesome cares for their users, and want to keep their system up to date with recent code.

Font Awesome은 이제 다양한 아이콘을 제공합니다. 우리는 이러한 유연성이 디자인 단계에서 개발 단계에 이르기까지 우리에게 도움이된다는 것을 알게되었습니다. Font Awesome의 경우 플랫폼은 사용자에게 두 가지 옵션을 제공합니다. 첫 번째 옵션은 1,588 개의 무료 아이콘 중에서 선택할 수있는 무료 서비스입니다. 두 번째 옵션은 7,842 개의 아이콘을 제공하는 Pro 멤버쉽입니다. 이 회사에는 아이콘 치트 시트라고도합니다. 이 목록에는 Font Awesome이 제공하는 모든 아이콘이 표시되어 무료 패키지 또는 프로 패키지의 일부인지 알려줍니다.

또한 Font Awesome은 CDN에서 코드를 가져 오는 옵션도 제공합니다. 우리는 그들의 길을가는 것이 좋습니다. CDN의 응답 시간이 빠르며 사이트와 플랫폼간에 지연이 거의 없습니다.

Jeff Romero : 페이지 속도가 훨씬 빠릅니다.

중소 기업 고객을 위해 Wordpress에서 사용자 지정 웹 사이트를 개발합니다. 우리는 역사적으로 이미지를 사용하여 소셜 미디어 프로필에서 전화 및 전자 메일 아이콘에 이르기까지 웹 사이트의 다양한 아이콘을 나타냅니다. 아이콘에 이미지를 사용하려면 일관된 아이콘 세트를 찾아서 업로드 한 다음 사이트에 맞게 크기를 조정해야합니다.

작은 이미지 파일이지만 일관된 아이콘 세트를 가져 와서 사이트의 템플릿과 일치시키는 것은 약간의 과정입니다. 이제 Font Awesome 및 해당 Wordpress 플러그인을 사용하여 아이콘을 일관된 미디어 세트로 대체 할 수 있으며 이는 단순히 한 줄의 HTML을 복사 / 붙여 넣기 만하면됩니다. 또한 글꼴 크기 속성을 사용하여 소량의 CSS로 아이콘 크기를 조정할 수 있습니다. 아이콘은 이미지 기반 아이콘보다 더 잘 표시되며 모바일 장치에서 명확하게 표시됩니다. 마지막으로 이미지 파일이 아닌 HTML 라인이므로 페이지 속도가 훨씬 빨라집니다.

Vance : 팀에 디자이너가 없을 때 특히 좋습니다

웹 개발자로서 Font Awesome을 멋진 아이콘을위한 빠른 솔루션으로 사용합니다. 즉, Font Awesome은 개발 팀에 디자이너가 없을 때 특히 좋습니다. 개발자가 Font Awesome의 CDN을 사용하여 플러그인에 플러그인을 삽입 할 수 있기 때문에 Wordpress 플러그인을 개발하는 데 편리합니다.

Font Awesome에 대한 나의 경험은 지금까지 훌륭합니다. 그러나 그것이 단점이 없다는 것을 의미하지는 않습니다. 명백한 단점 중 하나는 페이지 로딩 속도 (성능)입니다. 빠른 솔루션이므로 몇 개의 아이콘 만 사용하더라도 전체 아이콘 세트를 포함해야합니다. 이로 인해 웹 사이트 로딩 속도와 Google 페이지 속도 (PSI) 점수가 떨어질 수 있습니다.

Sunny Ashley : 새 방문자에게 간단하고 깨끗하며 즉시 인식 가능

우리는 웹 사이트 바닥 글에 Font Awesome 아이콘을 사용합니다. 특히 Facebook, Twitter 및 LinkedIn 아이콘을 사용하여 소셜 미디어 채널을 참조합니다. 간단하고 깨끗하며 새로운 방문자에게 즉시 인식됩니다. Font Awesome의 다른 사용자들도 알고 있듯이 매우 빠르고 쉽게 구성 할 수있었습니다.

Burak Özdemir : 깃털 아이콘이 과도한 DOM 크기를 유발하지 않습니다

Feather Icons는 Cole Bemis가 디자인하고 유지 관리하는 읽기 쉽고 시각적으로 즐거운 오픈 소스 아이콘 모음입니다. 2020 년 6 월 현재 280 개가 넘는 아이콘이 있습니다. Feather Icons에서 제공하는 모든 아이콘은 MIT 라이센스가 있으며 SVG 파일로 별도로 다운로드 할 수 있습니다. 페더 아이콘 웹 사이트에서 아이콘 크기, 아이콘 획 색상 및 획 너비를 사용자 정의한 후 다운로드 할 수 있습니다.

페더 아이콘은 개발자이거나 기본 프런트 엔드 작업을 처리하는 방법을 알고있는 경우 웹 사이트 나 프로젝트에 적합합니다. 이 경량 아이콘은 모듈 식 JavaScript 라이브러리로 렌더링 할 수 있기 때문에 웹 페이지 성능을 저하시킬 수있는 메트릭 인 과도한 DOM 크기를 유발하지 않습니다. 따라서 페더 아이콘을 사용하면 시중에서 구할 수있는 다른 패키지에 비해 페이지 로딩 속도를 더 낮출 수 있습니다. 이 아이콘 세트를 사용하는 유일한 단점은 대부분의 브랜드 아이콘을 찾을 수 없다는 것입니다.