Icons. Easy. Done.


Take the hassle out of icons in your website.

Find Icon
 

Overview

Fontawesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. It's designed to be used with inline elements. The ‹ i › and ‹ span › elements are widely used for icons. Also note that if you change the font-size or color of the icon's container, the icon changes.

Fontawesome 是網路的圖示庫和工具包,被數百萬設計師、開發人員和內容創作者使用。它普遍與行內元素一起使用。例如: ‹ i › 和 ‹ span ›。 另請注意,如果變更icon容器的字體大小或顏色,icon尺寸也會變更。

Styles

Three styles that are always in fashion and ready to bring that extra level of iconic flair to projects.

Regular

Regular

Easy, readable icons that blend right into your projects.

簡單就好,簡單易讀的圖示就可以完美融合到您的設計裡

Solid

Great for bold statements or small sizes.

非常適合顯眼的強調或是提昇小尺寸的閱讀性。

Solid
DuoTone

Duotone

Gives an illustrated feel or a pop of color.

給人一種趣味活潑尸的感覺或增添設計感。

 

Easy Installation

If you're new to Font Awesome, or just need a refresher. Here are some tips to get started.

如果您是 Font Awesome 的新手,或者只是需要複習一下。 以下是一些入門技巧。

Your Kit embed code is like your own personal Font Awesome CDN - just grab one line of code, insert it into your HTML or template files, and you're set to include icons in your website. We'll host the files and handle the magic.

您的 Kit 嵌入程式碼就像您自己的個人 Font Awesome CDN - 只需抓取一行程式碼,將其插入您的 HTML 或模板檔案中,然後您就可以在您的網站中包含圖示。

How to apply Fontawesome
How to apply Fontawesome

How to apply Fontawesome

Copy and paste the HTML code provided on the selected icon page

複製並貼上所選圖示頁面上提供的 HTML 程式碼。

How to apply Fontawesome
 

How to use icon

You can add an icon in front of the text that indicate the linked purpose. For example:

您可以在文字前面加上裝飾圖型來提示文字連結的目的。例如:

FAQs Files Setting

You can add an icon after the text to remind user what will happen after they clicks.For example:

當您担心光是文字不夠直覺時,可以在文字後方加上動作圖型來預告使用者點擊後的情況。例如:

View More Download Play Video

Sizing

Relative Sizing Class Font Size Pixels
fa-2xs 0.625 em 10px
fa-xs 0.75 em 12px
fa-sm 0.875 em 14px
fa-lg 1.25 em 20px
fa-xl 1.5 em 24px
fa-2xl 2 em 32px