Use font awesome to replace your website icon

Source: Internet
Author: User

http://fortawesome.github.io/Font-Awesome/whats-new/use Font Awesome to replace your website icon

Font Awesome, originally designed only for Bootstrap, but now you can use it alone to work on your website. Drop the picture icon and come with me with the font Awesome.

Font Awesome Features:

1, a font file, 249 icons.

2. Use CSS to control the style.

3, Unlimited zoom.

4, personal, business are free to use.

5, Support ie7+.

6, on the retina screen can also be perfectly presented.

7, the designer's assistant.

8, compatible screen reader.

Use of Font awesome:

1, first download font awesome fonts style files and fonts. CSS style file Download inventory here, please click here for font download

2. Copy the downloaded fonts and CSS style files to your project directory.

3, arbitrarily choose a CSS style file, you can choose Font-awesome.less or font-awesome.min.css as your icon style file.

4. Open the style file you selected, edit the font path in the style file, of course, this path is for your CSS style file location to determine.

5. You can refer to the style file in your project.

For example:

1 <link rel="stylesheet" href=". /css/font-awesome.min.css ">

Or

1 <link rel="stylesheet" href=". /css/font-awesome.css ">

If you need to be compatible with IE, please download font-awesome-ie7.css or FONT-AWESOME-IE7.MIN.CSS. The style file is then introduced into the project.

123 <! --[if IE 7]> < Link rel= "stylesheet" href= assets/css/ Font-awesome-ie7.min.css "> <! [endif]-->

    • 6. Add an HTML tag where you need to use these icons, give the label a class attribute, and see the Font awesome picture collection

For example:

Of course, these styles you can define yourself, but for compatibility, it is best to use the original!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.