사용 방법?

두께와 모서리를 선택하세요

다운로드

다운로드에는 아이콘글꼴과 샘플 HTML 사용에 필수인 CSS와 글꼴 파일, SVG 형식의 아이콘이 포함되어 있습니다

등록 및 다운로드
CDN

자기 웹 사이트의 <head> 섹션 안에 CSS 파일을 포함시키거나 CSS 내에서 @import를 통해서 하세요.

등록하고 이용하세요
다운로드에는 무엇이 들어 있나요?

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-user"></i>
  <i class="fi fi-ro-arrow-right"></i>
  <i class="fi fi-ro-book"></i>
  <i class="fi fi-ro-clean"></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>

다음 표에 볼 수 있듯이 모든 스타일은 다른 접두사를 사용합니다:

두께 모서리 접두사 예시 결과
Regular Rounded fi-rr <i class="fi fi-rr-user"></i>
Bold Rounded fi-br <i class="fi fi-br-user"></i>
Solid Rounded fi-sr <i class="fi fi-sr-user"></i>
Regular Straight fi-rs <i class="fi fi-rs-user"></i>
Bold Straight fi-bs <i class="fi fi-bs-user"></i>
Solid Straight fi-ss <i class="fi fi-ss-user"></i>

/webfonts 및 /css 폴더를 동일한 디렉터리에 보관하는 것이 좋습니다. 그렇지 않은 경우, 각 스타일의 CSS 파일에 언급된 웹 폰트의 경로를 변경해야 합니다.

아이콘 사용

참조가 완료되면 이제 템플릿 또는 페이지에서 아이콘 참조를 시작할 수 있습니다.

<body>
  <i class="fi fi-rr-user"></i>
  <i class="fi fi-br-arrow-right"></i>
  <i class="fi fi-sr-book"></i>
  <i class="fi fi-rr-clean"></i>
</body>
라이센스 요약

우리의 라이선스는 귀하가 다음과 같이 콘텐츠를 사용할 수 있게합니다:

  • 상업 및 개인 프로젝트
  • 디지털 또는 인쇄 매체
  • 횟수 제한 없이, 영구적으로
  • 전세계 어디에서든
  • 수정 및 파생 작품 제작 목적

이 텍스트는 참조용 요약입니다. 이는 계약상 의무를 지지 않습니다. 자세한 내용은 콘텐츠를 사용하기 전에 이용 약관을 참조하세요.

저작권 표시 방법

품질 좋은 아이콘을 만드는 데는 많은 시간과 노력이 듭니다. 작은 저작자 표시 링크를 추가해 주시기만 하면 됩니다. 자료를 사용할 매체를 선택해 주세요.

이 링크를 복사하여 리소스를 사용 중인 위치와 가까운 곳에 붙여 넣으세요. 가능하지 않은 경우, 웹사이트, 블로그 또는 뉴스레터 바닥글 또는 그레딧 섹션에 배치하세요.

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

다른 질문이 있으면 FAQ 섹션을 참조하세요

bold regular solid rounded straight

Flaticon을 친구에게 추천할 가능성이 얼마나 됩니까?

0 1 2 3 4 5 6 7 8 9 10
낮음 높음