国外免费bootstrap图标字体资源站-fontawesome

今天25学堂跟大家分享一个非常棒的而且免费的图标字体资源站-fontawesome.io

目前来说,fontawesome图标字体库主要使用在Bootstrap框架里面。可以说是一个非常完美的组合。也同时省去了webAPP前端工程师去设计和寻找图标的时间。提高我们的工作效率。之前25学堂也介绍过一些图标字体资源站。在线生成自定义APP图标字体利器:IconVault      Fontello图标字体的发电机,根据字体大小生成相应图标;5个免费设计英文字体酷站推荐|最火的英文字体下载。

FontAwesome:免费图标字体素材网是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用,由戴夫·甘迪设计发布的,该网站的所有素材都可以缩放、定制,跳转大小、颜色、阴影,以及任何可以与CSS搭配来完成。

fontawesome

免费bootstrap图标字体资源站网址:http://fontawesome.io/

具体的使用方法如下:

1.到官网高低载最新版本的Font Awesome.

2.解压文件,将此中的css和fonts文件夹拷贝到项目中,此中css文件夹中有两个css文件(font-awesome.css和font-awesome.min.css),fonts下有有5个

3.在须要应用的html或者其它类型的页面中引入样式文件,如下:

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

4.查看font-awesome.css文件,若是引用的是紧缩版的,就要查看那个文件了,打开文件看到第一个样式定义如下:

@font-face {

font-family: ""FontAwesome"";

src: url(""../fonts/fontawesome-webfont.eot?v=4.1.0"");

src: url(""../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0"") format(""embedded-opentype""), url(""../fonts/fontawesome-webfont.woff?v=4.1.0"") format(""woff""), url(""../fonts/fontawesome-webfont.ttf?v=4.1.0"") format(""truetype""), url(""../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular"") format(""svg"");

font-weight: normal;

font-style: normal;

}

必然重视此中的src:url()中的路径是不是当前与当前项目标实际路径向匹配。

4.最后在页面中参加响应的html元素,并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。:

<div>

<a href="#"><i></i> Home</a>

<a href="#"><i></i> Library</a>

<a href="#"><i></i> Applications</a>

<a href="#"><i></i> Settings</a>

</div>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

<i></i>

别的,font awesome 和BootStrap组合运用可以达到更好的结果。

每天更新,
全站高品质素材免费下载!