글꼴 멋진 예입니다. Font Awesome 및 IcoMoon: 아이콘 글꼴 작업. 아이콘 글꼴이란 무엇입니까?
안녕하세요 친구.
오늘은 "디자인"섹션의 새로운 기사입니다.
내 블로그를 팔로우하는 사람들은 내가 며칠 전에 블로그 디자인을 업데이트했다는 것을 알고 있습니다. 따라서 반대 메뉴 항목 및 카테고리와 일부 제목(예: 인기 게시물과 토론 게시물 전환 사이의 탭, 텍스트 끝의 유사한 기사 제목 근처 및 제목 근처)에 표시되는 모든 아이콘 댓글 수는 사진이 아니며 특수 글꼴인 Font Awesome을 사용하면 좋은 품질의 아이콘을 쉽게 만들 수 있습니다.
댓글 수, 날짜, 조회 수 옆의 작은 아이콘에도 동일하게 적용됩니다.
그리고 대부분의 경우 스타일을 작성하고 매번 이미지를 표시하는 것보다 훨씬 쉽습니다. 아이콘은 글꼴로 표시되고 아이콘이 배치된 블록의 일반적인 스타일과 일치하므로 정렬, 색상 등에 대한 추가 스타일을 지정할 필요도 없습니다.
일반적으로 문제는 매우 멋지다. 처음 주문을 했을 때 이런 아이콘을 접하게 되었는데, 이로 인해 많은 불편을 겪었습니다. 저는 그것들을 어떻게 사용하는지 몰랐고 어떤 경우에는 단순히 이 아이콘을 이미지로 대체했습니다. 이제는 사용에 전혀 문제가 없습니다. Font Awesome 글꼴을 사이트에 연결한 다음 아이콘을 올바른 위치에 표시하기 위한 코드를 추가하기만 하면 됩니다. 매우 간단합니다. 실제로 살펴보겠습니다.
Font Awesome 아이콘을 웹사이트에 연결하는 방법
연결 방법에는 2가지가 있습니다.
- 서비스 자체에서 아이콘 라이브러리를 연결합니다. 서비스가 아이콘을 저장하는 클라우드 스토리지 측의 아이콘 파일 경로를 지정합니다. 이 경우 페이지가 로드될 때마다 이 파일도 로드됩니다. 처음에는 이 옵션이 있었지만 페이지 로딩 속도가 상당히 느려지는 것을 발견했습니다. 그래서 두 번째 옵션으로 전환했습니다.
- 공식 홈페이지에서 Font Awesome 아이콘 파일을 다운로드하여 일반 스타일 파일처럼 템플릿에 연결하세요. 사이트가 눈에 띄게 빨라집니다.
두 가지 옵션을 더 자세히 살펴보겠습니다.
옵션 1
가자 폰트어썸 공식 홈페이지클라우드 저장소에서 파일을 다운로드하기 위한 연결 코드 줄을 가져옵니다. 이 줄은 페이지의 첫 번째 단락에 있으며 아래에도 복사했습니다.
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
사이트 사이의 영역에 삽입하고 여기에 삽입합니다. WordPress 사이트가 있는 경우 이 영역은 Header.php 파일에 있습니다.
이것으로 연결이 완료됩니다. 남은 건 이 페이지로 이동그리고 적절한 아이콘을 선택하세요. 원하는 아이콘을 클릭하면 다양한 아이콘 크기에 대한 옵션이 있는 페이지로 이동하여 다양한 글꼴 크기에서 어떻게 보이는지 이해할 수 있습니다. 아이콘을 표시하는 코드도 있습니다.
아이콘을 표시하려는 위치에 이 코드를 붙여넣습니다.
이 삽입 방법은 WordPress 위젯 제목에서는 작동하지 않습니다. 해당 문구 앞에 아이콘 코드만 삽입하시면 해당 문구가 사라집니다. 따라서 다음 기사에서 Jquery를 사용하는 다른 방법을 사용해야 하며 모든 것이 매우 간단합니다.
템플릿 파일이나 일부 텍스트 요소에 코드를 배치해야 합니다. 예를 들어 콘텐츠 입력 필드 자체의 텍스트 위젯에서는 아이콘이 작동합니다. 이것이 인기 있고 토론된 게시물의 위젯이 저에게 작동하는 방식입니다. 나머지 아이콘은 템플릿 자체와 플러그인의 레이아웃으로 작성됩니다.
옵션 2
파일이 있는 폴더를 다운로드하세요. 여기에서.
모든 폴더와 파일의 테마 루트에 모든 파일을 업로드합니다. 특정 파일 하나만 다운로드해야 하는지, 폴더 전체를 다운로드해야 하는지 깊게 생각하지 않고 아카이브 안에 있는 모든 것을 다운로드했습니다.
다음으로 CSS 폴더에 있는 Font-awesome.min.css 파일을 포함해야 합니다. 다음 줄을 사용하여 경로(도메인 및 주제 이름)를 적어 두세요. 첫 번째 옵션과 동일한 방식으로 사이트 헤더에 배치합니다.
< link rel = "stylesheet" href = "http://도메인/wp-content/themes/테마 폴더 이름/css/font-awesome.min.css"> |
여기 웹사이트 디자인으로 뭔가를 하고 싶은 사람들을 위한 간단하지만 매우 유용한 자료가 있습니다. 이제 이미지를 사용하고, Photoshop에서 이미지를 줄이고, 자르는 등의 작업을 할 필요가 없습니다. Font Awesome 글꼴을 연결하고 해당 기능을 사용하기만 하면 됩니다.
아이콘 색상 변경
아이콘의 색상을 변경해야 하는 경우에도 가능하며 어렵지 않습니다. 각 아이콘에는 공통 클래스(.fa)와 아이콘 이름이 포함된 개별 클래스가 있습니다. 연필 아이콘이 있는 위의 예에서 개별 클래스는 다음과 같습니다.
fa-연필-광장-o
< span class = "s" >fa - 연필 - 정사각형 - o< / span > |
이 아이콘에 특정 색상을 설정하려면 이 클래스를 스타일 파일에 추가하고 그 안에 색상과 크기, 글꼴 스타일 및 기타 스타일을 원하는 대로 작성하세요. 미묘한 차이는 아이콘이 이전 의사 요소에 표시되므로 스타일을 지정해야 하는 것이 이 요소라는 것입니다. 예를 들어:
Fa-pencil-square-o:before( color: #111; /*검정색*/ 글꼴 크기:12px /*아이콘 크기 너비 및 높이 12픽셀*/ )
멋진 벡터 아이콘 세트입니다. 아니면 문자와 숫자가 아닌 그림으로 구성된 글꼴입니다. 그리고 이러한 이미지는 기본적으로 글꼴이므로 CSS 스타일을 사용하여 디자인(수정)하고 색상, 크기, 그림자 등을 설정할 수 있습니다. 당신이 동의하는 것은 매우 편리합니다.
Font Awesome에는 현재 1,500개 이상의 무료 아이콘이 포함되어 있습니다!
웹사이트에 Awesome 글꼴을 설치하는 방법
Awesome 글꼴 아이콘을 사용하려면 웹사이트에 글꼴과 스타일 세트를 다운로드해야 합니다. 이렇게 하려면 공식 웹사이트(https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself)로 이동하여 버튼을 클릭하여 아카이브를 다운로드하세요.
이제 섹션별로 연결하세요 사이트의 멋진 스타일:
Awesome 글꼴을 연결하는 또 다른 방법
웹사이트에 아무것도 복사할 필요는 없지만 CDN 네트워크에서 모든 데이터를 다운로드하세요. 이렇게 하려면 섹션에 다음 코드를 추가해야 합니다. :
이 솔루션의 장점은 데이터가 다른 서버(호스팅 사이트 및 Awesome 네트워크 글꼴)에서 병렬로 로드되고 글꼴이 이미 캐시될 수 있으므로 사이트 속도가 더 빠르다는 것입니다. 이전에 해당 사이트가 사용된 사이트를 방문한 적이 있는 경우 브라우저.
단점은 오프라인 사이트(인터넷 접속 없이)에서 사용할 수 없고 Awesome CDN 네트워크에 의존한다는 것입니다. 그래서 저는 주로 첫 번째 방법을 사용합니다.
웹사이트에서 멋진 글꼴을 사용하는 방법
웹사이트에 글꼴을 연결한 후에는 다음 두 가지 방법으로 웹페이지에 Awesome 아이콘을 추가할 수 있습니다.
- 요소에 적절한 클래스 설정 그리고 ;
- 의사 요소를 사용하여 원하는 요소에 추가 :전에, :후에및 해당 속성 값 콘텐츠.
Awesome 글꼴 사용 예
사이트 중 하나에서 다음 코드를 사용했습니다(요소에 대해). 사용된 글꼴 스타일 멋진 버전 4.7.0):
컴퓨터 장비 및 소프트웨어 공급
CCTV 및 영상감시 시스템 구축
출입 통제 및 관리 시스템 개발
LAN/SCS 및 전화 통신 설계 및 설치
브라우저에서 결과는 다음과 같습니다.
사이트의 멋진 아이콘을 볼 수 있는 곳
키보드 키에 문자와 숫자가 인쇄되어 있고 이를 사용하는 데 어려움이 없다면 멋진 글꼴에 관해 질문이 있습니다. 아이콘 코드와 그래픽 이미지 사이의 대응 관계를 찾는 방법입니다. 예를 들어 아이콘을 표시하는 데 사용할 HTML 코드는 무엇입니까? 기계적 인조 인간?
자세한 내용은 공식 웹사이트(https://fontawesome.com/icons?d=gallery&m=free)를 방문하세요.
예를 들어, 이미지 기계적 인조 인간다음 코드는 해당됩니다.
화면에는 다음과 같습니다.
사이트에서 어떤 버전의 Awesome 글꼴을 사용하는 것이 더 좋나요?
Awesome 글꼴은 끊임없이 진화하고 있으며, 새로운 아이콘과 디자인 옵션이 정기적으로 추가됩니다. 이 글을 쓰는 시점에서는 글꼴 버전 5가 최신 버전입니다. 그러나 귀하의 웹 사이트에서는 이전 버전 4.7.0 또는 심지어 3.2.1도 안전하게 사용할 수 있습니다. 이렇게 하려면 다음 페이지를 방문하세요.
아이콘은 ::before 의사 클래스를 통해 표시되므로 모든 요소에 아이콘 이름이 포함된 클래스를 추가하기만 하면 됩니다. 요소는 일반적으로 사용됩니다. , 그러나 다른 인라인 요소를 사용할 수 있습니다. 예를 들면 다음과 같습니다. , 등등
을 위한 fa와 fa-icon이라는 두 가지 주요 클래스가 표시됩니다. 여기서 아이콘 대신 아이콘 이름이 기록됩니다. 이 페이지에서는 모든 이름을 확인할 수 있습니다.
쌀. 1. 비디오 플레이어 아이콘
play라는 아이콘을 추가하려면 다음 코드를 작성하세요.
요소 자체 비어 있고 아이콘이 필요한 페이지의 위치에 삽입됩니다. 크기는 현재 텍스트의 크기와 일치합니다.
글꼴 크기 속성을 사용하여 세트에서 아이콘의 크기를 변경하고 스타일에서 이를 재정의할 수 있습니다. Font Awesome은 사전 제작된 5가지 크기도 제공합니다. 요소에 추가 클래스를 추가하는 것으로 충분합니다. 예제 1에 표시된 대로.
예시 1. 아이콘 크기
원본 크기
FA-LG
fa-2x
fa-3x
fa-4x
fa-5x
이 예의 결과는 그림 1에 나와 있습니다. 2.
쌀. 2. 아이콘 크기
그림 물감
아이콘은 텍스트 기호이므로 스타일 속성 color , background , text-shadow 및 텍스트 디자인을 지정하는 기타 속성이 아이콘에 적용 가능합니다. 예제 2에서는 아이콘 모양을 변경하는 몇 가지 옵션을 보여줍니다.
예 2. 스타일을 사용하여 아이콘 디자인
이 예의 결과는 그림 1에 나와 있습니다. 삼.
쌀. 3. 컬러 아이콘
Font Awesome은 아이콘 색상을 흰색으로 변경하여 책 아이콘 스타일에 색상이 지정되지 않도록 하는 특수 클래스 fa-inverse를 도입합니다.
아이콘 회전
아이콘은 시계 방향으로 90도, 180도 또는 270도 회전할 수 있으며 수평 또는 수직으로 뒤집을 수 있습니다. 이를 위해 다음 클래스가 사용됩니다.
- fa-rotate-90 - 시계 방향으로 90도 회전합니다.
- fa-rotate-180 - 180도 회전;
- fa-rotate-270 - 270° 회전;
- fa-flip-horizontal - 수평 반사;
- fa-flip-vertical - 수직으로 뒤집습니다.
모든 아이콘이 회전되고 반사되는 것은 아니라는 점을 고려해야 하며 결과는 비대칭 아이콘의 경우 눈에 띄게 나타납니다(예 3).
예 3: 아이콘 회전 및 뒤집기
이 예의 결과는 그림 1에 나와 있습니다. 4. 첫 번째 비행기 아이콘은 원래 형태로 표시되고, 두 번째는 90도 회전되고, 세 번째는 수평으로 반사됩니다.
쌀. 4. 아이콘 변형
생기
애니메이션은 일반적으로 서스펜스 효과를 만드는 데 사용됩니다. 아이콘은 두 가지 방법으로 시계 방향으로 끝없이 회전하도록 만들 수 있습니다. fa-spin 클래스는 부드러운 회전을 생성하고, fa-pulse 클래스는 단계별 회전을 생성합니다. 아래는 축구공의 회전입니다.
아이콘 결합
일반적인 표시 외에도 아이콘을 서로 결합할 수 있습니다. 이렇게 하려면 요소를 생성하세요.
친애하는 독자 여러분, 안녕하세요! 나는 오랫동안 글꼴에 대해 이야기 할 계획이었고 내 프로젝트에서 글꼴을 적극적으로 사용했으며 오늘은 글꼴에 유리한 몇 가지 주장을 제시하겠습니다.
사이트의 작은 그래픽 요소에 대해 여전히 래스터 이미지를 사용한다면 실망스러울 것입니다. 로드할 때 서버에 대한 추가 http 요청을 생성하고 크기를 조정하면 명확성을 잃습니다.
이전에는 요청 수를 줄이기 위해 그래픽 디자인 요소를 에 결합했는데, 사이트 로딩 속도를 최적화하는 이 솔루션은 오늘날에도 여전히 유효합니다. 그러나 이 방법으로는 스케일링 문제가 해결되지 않으며, 이미지를 확대하면 매력적인 모습을 잃게 됩니다.
완벽하게 확장되고 고해상도 화면에서 멋지게 보이는 거대한 벡터 아이콘 세트가 포함되어 있습니다! 검색 양식, 카테고리 목록, 기사 게시 날짜 근처, 소셜 네트워크 버튼 및 기타 디자인 요소 등 사이트의 모든 곳에서 사용됩니다.
아이콘 폰트의 장점과 단점
전통적인 이미지는 오랫동안 웹사이트 디자인의 그래픽 요소로 입증되어 왔으며, 현대에는 CSS3, SVG 및 아이콘이 있는 글꼴의 새로운 기능으로 점차 대체되고 있습니다.
그들의 인기 이유는 무엇입니까? 프로젝트에서 구성의 유연성, 설치 및 사용의 용이성이 결정적인 역할을 했습니다. 주요 이점:
- 컬렉션에는 사이트에 대한 500개 이상의 무료 벡터 아이콘이 포함되어 있습니다.
- 아이콘은 품질 저하 없이 어떤 크기로든 조정됩니다.
- CSS를 사용한 스타일링 - 글꼴 크기, 색상 및 기타 속성.
- 브라우저 지원을 활성화할 필요가 없습니다.
- 브라우저 간 호환성(IE7 이상), 모바일 브라우저 지원.
장점과 함께 단점도 언급할 가치가 있습니다. 불행하게도 단점도 존재하지만 매우 미미합니다.
- 다른 브라우저에서 동일하게 표시되는 이미지와 달리 글꼴은 브라우저와 운영 체제에 따라 다르게 보일 수 있습니다.
- 디자이너들은 수많은 아이콘에 대해 자세히 작업했지만 프로젝트에 필요한 아이콘을 찾지 못할 가능성이 있습니다.
Font Awesome 글꼴을 연결하는 방법
글꼴을 연결하는 가장 쉽고 쉬운 방법은 외부 CDN에서 글꼴을 다운로드하여 해당 섹션에 삽입하는 것입니다.
다음 줄: <"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">두 번째 방법은 호스팅에 Font Awesome 글꼴을 수동으로 설치하는 것입니다. 공식 웹사이트에서 아카이브를 다운로드하고, 압축을 풀고 서버의 CSS 및 글꼴 폴더를 Font-Awesome 디렉터리에 저장하세요. 동일한 방식으로 연결하여 파일 경로만 변경합니다.
<링크 rel = "스타일시트" href = "../font-awesome/css/font-awesome.min.css">웹사이트에서 Font Awesome 아이콘을 사용하는 방법
페이지에 아이콘을 삽입하려면 다음을 수행하십시오. 사이트에서 원하는 아이콘을 찾아 해당 코드를 복사한 다음 HTML 모드에 붙여넣습니다.
수업="fa fa-트위터" > 나>
프로젝트의 공식 웹사이트에는 문서와 추가 사용 예제가 있습니다.
때로는 사이트 요소가 PHP 함수 등을 통해 동적으로 형성되고 HTML을 직접 편집할 수 없는 경우 CSS 선택기에서 의사 클래스가 사용됩니다.
카테고리 위젯을 예로 들어 이를 수행하는 방법을 보여드리겠습니다. 소스 코드 조각을 살펴보세요.
<div 클래스 = "widget_title" >블로그 카테고리사업부 > <울 > <li class="cat-item cat-item-5" > <a href = "/카테고리/워드프레스/" >워드프레스에이 > 리 > 울 >.cat-item :before ( content : "\f07c" ; 글꼴 계열 : FontAwesome; color :#393 ; padding-right :10px )콘텐츠 속성은 아이콘이 있는 페이지에서 찾을 수 있는 유니코드 문자표의 16진수 코드에서 아이콘을 생성합니다.
유니코드 \f07c는 원하는 아이콘의 16진수 코드와 정확히 일치하며, 나중에 이를 자체 클래스 스타일에 사용합니다.
이상으로 간략한 리뷰를 마치겠습니다. 궁금한 점은 댓글로 문의해주세요. 귀하의 사이트에서 Font Awesome 아이콘을 사용하십니까? 아마도 다른 글꼴일 수도 있습니다.
CDN Font Awesome은 단 한 줄의 코드만으로 사이트나 애플리케이션에서 Font Awesome 사용을 시작하는 가장 쉬운 방법입니다. 아무것도 다운로드하거나 설치할 필요가 없습니다.
우리는 각 사이트에 대해 개별적으로 각 아이콘 세트를 생성하므로 불필요한 번거로움 없이 아이콘을 신속하게 변경할 수 있습니다. 또한 이 이메일 주소를 사용하면 어떤 아이콘 세트가 귀하의 것인지 식별할 수 있으며, 이는 귀하가 세트를 관리할 수 있음을 의미합니다.
사이트 아이콘입니다. 빠른.
서버에 있는 파일에 시간을 낭비할 필요가 없습니다. 675개의 아이콘과 스타일 세트가 모두 제공되며 모두 빠른 로딩에 최적화되어 있습니다.
간편한 업데이트
각 사이트에는 고유한 아이콘 세트가 있으므로 코드를 변경하지 않고도 쉽게 업데이트할 수 있습니다. 훌륭해요 =).
또는
고급 사용자 정의 용이함
CSS 사용
- 다음 코드를 태그에 붙여넣으세요. 웹사이트의 HTML 코드에 추가하세요.
"경로/to/font-awesome/css/font-awesome.min.css">
- 예시 보기
Sass 이하 사용
LESS 또는 SASS를 사용하여 Font Awesome 4.7.0을 사용자 정의하려면 이 방법을 사용하세요.
- 전체 글꼴 멋진 폴더를 프로젝트 폴더에 복사하세요.
- 프로젝트에서 글꼴-awesome/less/variables.less 또는 글꼴-awesome/scss/_variables.scss 파일을 열고 글꼴이 있는 폴더를 가리키도록 @fa-font-path 또는 $fa-font-path를 각각 편집하세요.
@fa-font-path : "../font" ;
글꼴 폴더에 대한 경로는 컴파일된 CSS 폴더에 상대적이어야 합니다.
- 컴파일러를 사용하여 LESS 또는 SASS 파일을 컴파일합니다. 모든 것이 작동해야 합니다.
- Font Awesome을 시작하려면 예제를 확인하세요!
또는
고급 레벨 프로
- 애플리케이션의 Gemfile에 다음 줄을 추가하세요.
gem "font-awesome-less"
- 다음 실행:
$번들
- 또는 수동으로 설치하십시오.
$ 보석 설치 글꼴 - 최고 - 없음
Rails를 사용하는 경우 예를 들어 아래 코드를 application.less 파일에 붙여넣습니다.
- 프로젝트의 Gemfile에 다음 줄을 추가하세요.
gem "font-awesome-sass"
- 다음 실행:
$번들
- 또는 수동으로 설치하십시오.
$ 보석 설치 글꼴-멋진-Sass
Rails를 사용하는 경우 예를 들어 아래 코드를 application.scss 파일에 붙여넣습니다.
@import "글꼴 멋진 톱니" ; @import "글꼴이 훌륭해요" ;
추가 정보
검증인
오래되고 결함이 있는 브라우저에서 최상의 결과를 제공하기 위해 Font Awesome은 경우에 따라 CSS 핵을 사용하여 브라우저의 결함과 버그를 우회합니다. 당연히 이러한 해킹은 유효성 검사기에서 코드를 확인할 때 경고를 발생시킵니다. 또한 Font Awesome은 아직 완전히 표준화되지 않았지만 점진적인 향상을 위해서만 사용되는 여러 상황에서 새로운 CSS 속성을 사용합니다.
실제로 이러한 유효성 검사기 경고는 대부분의 CSS가 해킹 없이 작동하고 따라서 사용되지 않는 영역에 기여하지 않기 때문에 관련이 없습니다. 이것이 실제로 우리가 이러한 경고를 무시하는 이유입니다.
Internet Explorer 8 및 @font-face
IE8에서는:before 의사 요소와 함께 사용할 때 @font-face에 몇 가지 문제가 있습니다. Font Awesome은 이러한 조합을 사용합니다. 브라우저 창 위에 마우스 커서를 올리지 않고 페이지가 캐시되거나 로드되는 경우(예: "새로 고침" 버튼을 클릭하거나 프레임을 통해 콘텐츠를 로드하는 경우) 글꼴이 로드되기 전에 페이지가 생성됩니다. 페이지(본문) 위에 마우스를 올리면 일부 아이콘이 표시되고, 로드되지 않은 나머지 아이콘 위에 마우스를 올리면 해당 아이콘도 다시 활성화됩니다. 이 문제.
찾다
신청
