시작하기
Uicons는 어떻게 사용하나요?
세 가지 방법으로 Uicons를 웹사이트 프로젝트에 포함시킬 수 있습니다. 우리 CND을 통해 부속으로 삽입할 수 있고, 다운로드로 사용 가능한 포맷(SVG, CSS, 글꼴 파일 및 HTML 예)으로 전체 아이콘 패키지를 받을 수 있으며, 또는 npm 패키지 매니저를 통해 설치할 수 있습니다.
CDN을 통해 Uicons 사용하기
Latest version: 2.6.0
CDN은 페이지에 Uicons를 삽입하는 가장 빠른 방법입니다. HTML <head> 섹션에 링크를 복사하고 붙여 넣기 해서 CSS를 로드하거나 @import를 사용하여 CSS에 코드를 삽입할 수 있습니다.
사용하려는 아이콘을 선택하고 "CDN" 섹션 아래의 복사 버튼을 클릭하여 프로젝트에 코드를 추가합니다.
다운로드를 통해 Uicons 사용하기
다운로드 기능을 이용하면 각 아이콘의 개별 SVG, CSS 스타일시트, 글꼴 파일, HTML 샘플과 함께 전체 아이콘 패키지를 다운로드할 수 있습니다.
사용하고 싶은 아이콘을 선택해 "다운로드" 섹션 아래의 다운로드 버튼을 클릭하여 전체 아이콘 패키지를 받으세요.
npm 패키지 매니저를 통해 Uicons 사용하기
최신 Uicons 버전을 설치하세요 - 아이콘이 개별로 SVG 포맷, CSS 스타일시트 및 글꼴 파일로 포함됩니다 - 그리고 npm 패키지 매니저를 통해 손쉽게 프로젝트를 최신 아이콘 및 개선 상태로 유지하세요.
npm i @flaticon/flaticon-uicons
간단히 말해, 이 방법으로 결과는 다운로드할 수 있는 포맷과 동일하지만 더 간편하게 최신 패키지를 이용하실 수 있습니다.
더 자세히 알고 싶으시면 저장된 페이지를 방문하세요.
다운로드에는 무엇이 들어 있나요?
Uicons의 모든 스타일 패키지에는 다음과 같은 디렉터리와 파일이 포함되어 있습니다:
| 파일 & 폴더 | 무엇인가요 |
|---|---|
| /css | 웹 폰트용 스타일시트 |
| /svg | 각 아이콘에 대한 개별 SVG |
| /webfont | CSS에서 사용되는 웹 폰트 파일 |
CSS로 웹 폰트 사용
/css/Uicons-[your-style].css 파일에는 코어 스타일과 Uicons를 사용할 때 필요한 모든 아이콘 스타일이 포함되어 있습니다. /webfonts 폴더에는 위 CSS가 참조하고 종속된 모든 서체 파일이 포함되어 있습니다.
/webfonts 전체 폴더와 /css/Uicons-[your-style].css를 프로젝트의 정적 자산 디렉터리(또는 프런트엔드 자산 또는 벤더 자료를 보관하고자 하는 위치)에 복사합니다.
복사된 /css/Uicons-[your-style].css 파일에 대한 참조를 Uicons를 사용할 각 템플릿 또는 페이지의 <head>에 추가합니다.
Uicons 교체-[your-style].css 를 다운로드한 스타일의 이름으로 변경합니다.
예: Uicons-rounded-outline.css
<head>
<link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fi fi-ro-square-right"></i>
<i class="fi fi-ro-arrow-right"></i>
<i class="fi fi-ro-book"></i>
<i class="fi fi-ro-broom"></i>
</body>
다운로드한 모든 파일을 직접 관리하고 있으므로 페이지 <head> 참조가 프로젝트에서 모든 Uicons 파일을 이동한 정확하게 일치하는지 확인하세요.
다중 스타일 사용
하나 이상의 스타일을 사용하시겠습니까? 그렇게 하려면 프로젝트에서 사용할 모든 스타일을 다운로드해야 합니다.
Uicons를 사용하면 각각에 대해 두 가지 모서리 스타일(둥근 모서리 및 각진 모서리)과 세 가지 두께(일반, 굵게, 솔리드)를 사용할 수 있습니다.
다음으로 이전 섹션에서 설명한 대로 폴더에 모든 파일을 배치한 다음, 다운로드한 모든 스타일에 대한 참조를
섹션에 추가해야 합니다.
<head>
<link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet">
<link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet">
<link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet">
</head>
다음 표에 볼 수 있듯이 모든 스타일은 다른 접두사를 사용합니다:
| 두께 | 모서리 | 접두사 | 예시 | 결과 |
|---|---|---|---|---|
| 보통 | 라운드 | fi-rr | <i class="fi fi-rr-square-right"></i> |
|
| 볼드 | 라운드 | fi-br | <i class="fi fi-br-square-right"></i> |
|
| 솔리드 | 라운드 | fi-sr | <i class="fi fi-sr-square-right"></i> |
|
| 얇은 | 라운드 | fi-tr | <i class="fi fi-tr-square-right"></i> |
|
| 보통 | 수직 | fi-rs | <i class="fi fi-rs-square-right"></i> |
|
| 볼드 | 수직 | fi-bs | <i class="fi fi-bs-square-right"></i> |
|
| 솔리드 | 수직 | fi-ss | <i class="fi fi-ss-square-right"></i> |
|
| 얇은 | 수직 | fi-ts | <i class="fi fi-ts-square-right"></i> |
|
| 유형 | 접두사 | 예시 | 결과 |
|---|---|---|---|
| 브랜드 | fi-rr | <i class="fi fi-brands-instagram"></i> |
|
/webfonts 및 /css 폴더를 동일한 디렉터리에 보관하는 것이 좋습니다. 그렇지 않은 경우, 각 스타일의 CSS 파일에 언급된 웹 폰트의 경로를 변경해야 합니다.
아이콘 사용
참조가 완료되면 이제 템플릿 또는 페이지에서 아이콘 참조를 시작할 수 있습니다.
<body>
<i class="fi fi-rr-square-right"></i>
<i class="fi fi-br-arrow-right"></i>
<i class="fi fi-sr-book"></i>
<i class="fi fi-rr-broom"></i>
</body>
라이센스 요약
우리의 라이선스는 귀하가 다음과 같이 콘텐츠를 사용할 수 있게합니다:
- 상업 및 개인 프로젝트
- 디지털 또는 인쇄 매체
- 횟수 제한 없이 , 영구적으로
- Anywhere in the world
- To make modifications and derived works
이 텍스트는 참조용 요약입니다. 이는 계약상 의무를 지지 않습니다. 자세한 내용은 콘텐츠를 사용하기 전에 이용 약관을 참조하세요.
저작권 표시 방법
품질 좋은 아이콘을 만드는 데는 많은 시간과 노력이 듭니다. 작은 저작자 표시 링크를 추가해 주시기만 하면 됩니다. 자료를 사용할 매체를 선택해 주세요.
이 링크를 복사하여 리소스를 사용 중인 위치와 가까운 곳에 붙여 넣으세요. 가능하지 않은 경우, 웹사이트, 블로그 또는 뉴스레터 바닥글 또는 그레딧 섹션에 배치하세요.
다른 질문이 있으면 FAQ 섹션을 참조하세요