当前位置: 首页 >> HTML5+CSS3_HTML网站模板_DIV+CSS技术分享 >> 阅读正文

国外免费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组合运用可以达到更好的结果。


无觅相关文章插件,快速提升流量

本文标题:国外免费bootstrap图标字体资源站-fontawesome

本文地址:http://www.25xt.com/html5css3/7904.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。