The coolest bootstrap free fonts and icons

Source: Internet
Author: User
Tags vector font
Reprint: Http://www.gbtags.com/gb/share/4489.htm?ref=myread application, remove sponsored links

If you are looking for the bootstrap icon, today's recommendation is absolutely important to you. In this article, we have made an integration of the free font icons on this set of frames (and will, of course, continue to be updated later). As you know, icon fonts have many advantages in a Web page design: They are easy to use, not just images, but a carrier. Scales at will, can also adapt to various sizes of the screen (including mobile devices, tablets, etc.).

This set of collection icons is easy to use: You only need to click on the download package to add the file to your directory. In the introduction we will also have a brief description of each icon to give you an idea of how to use them. If you are interested in collecting, you can also create a document yourself and add all of them. We often recommend some icon site to everyone, in addition, there are bootstrap templates and fonts, such as bootstrap templates, such as Jalia and gbtags, whether template or material, we will be the best presented to you. So, what are we waiting for? Let's go. 1. Glyphicons halflings

First of all, this includes more than 200 font icons from Glyphicon halflings. A very good set of bootstrap template icons, especially thanks to everyone in glyphicons. Here in addition to the icon, there are some large graphics for you to use and download. Help you build a website quickly.

How to use:

Find what you need in glyphicons, and then add an icon to the HTML, which reads:

<span class= "Glyphicon glyphicon-search" aria-hidden= "true" ></span> 2. Font Awesome

479 vector font icon All free, what is this concept is that even if you do not need to immediately collect the rhythm, you know. Maybe you've heard about this set of icons before, because it's been on many sites. They provide us with a convenient, although there have been similar introduction, but I still want to say today, in many icon fonts, I really think it is the best-font Awesome

How to use:

On the start page, there are some very good ways to use fonts. The simplest is to pour a line of code into a CDN, and you don't need to download anything, just paste in the first section of the HTML:

<link href= "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel= "stylesheet" >

To introduce another method here (I like you know), refer to the default font Awesome in CSS, download and copy the ' font-awesome ' directory to your project, add the link "font-awesome.min.css" file to the first section of HTML.

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

Of course, there are many other ways to introduce a simple example:

<i class= "FA Fa-camera-retro" ></i>

These methods can make your favorite fonts become smaller, change the color shadow, etc., as long as you like, omnipotent. 3. Elegant Icon Font

Composed of 360 elegant vector icon fonts, completely free to use-elegantthemes. These icons have all been optimized for all multiples of 16*16 pixels (32px,64px, etc.). Make the details more accurate and clear, on any display can present the most perfect side, of course, including Retina screen.

How to use:

Don't think it's hard: Download the package and unzip it in the ' Elegant_font ' folder and you'll find the HTML CSS subfolder and copy it into your project (note that you can rename it here) to add the connection to the first section of HTML in the ' style.css ' file.

<link rel= "stylesheet" href= "Path/to/elegant-font/style.css" >

You can add icons to your HTML and use CSS to change their style:

<span aria-hidden= "true" class= "Icon_pencil" ></span>

For example:

Here's how I use icons in the Trilli bi Template:

HTML:

<div class=

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.