设为首页|加入收藏| 联系站长

网站首页工作总结

Fontawesome是一款基于css框架的网页字体图标库

发布时间:2017/3/15 9:20:37 编辑:YAN秀 阅读( 来源:本站原创

1. 引言

网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋。下面的小图标,你是不是会经常用到?

Fontawesome是一款基于css框架的网页字体图标库

你可能说——"我们用的都是彩色的,不是黑白的"——别着急,下面会讲到。因为它们也可以变为彩色的。

黑白的也好,彩色的也罢,如果用传统的"css + 图片"的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧。一般的程序猿,包括前端程序猿,估计只能去一些素材网站了,不会自己拿ps画。

Fontawesome是一款基于css框架的网页字体图标库

但是问题又来了,如果你搜索来的是黑白的,现在也用黑白的,后期网站变化主题怎么办?你搜出来的是16 * 16的,要有个页面需要 32 * 32的怎么办?如果沿着这个方向考虑,你会发现,自己将在这上面耗费大量资源和精力。

但是如果我告诉你,有一个东西,它已经为你准备了网站上常用的图标,能大能小,能随便修改颜色,完全开源,完全免费,你会不会心动?如果你非常着急,先去百度一下"font-awesome",再来继续读文章不迟。

2. 应用font-awesome

下载:fontawesome中文官方网站下载,或者是小编在云盘中分享的。下载解压之后,应该能看到"css"和"font"两个文件夹。css文件夹中存放着css文档,font文件夹中存放在着适用于不同浏览器的字体文件。其余文档可以删掉,

简单应用:将整理好的文件夹加入到你的网站,将css文件夹中的css文件,引入到页面中即可。

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

或者是引用 CDN 静态资源公共库(这样就不需要将fontawesome文件下载到自己的网站),小编一般引用下面的资源库

<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" type="text/css" />

引用CSS文件之后,接下来就可以使用图标了。例如,我要在页面中显示一个的图标,我可以这么写:

<i class="fa fa-group"></i>账户
<i class="fa fa-fax"></i>查询
<i class="fa fa-database">
<i class="fa fa-eye"></i>投诉
<i class="fa fa-gear"></i>中心
<i class="fa fa-upload"></i>充值

这样就可以出不同图标啦!但是,显示是显示出来了,那么对应图标的这个css类名我是从哪里找来的呢?

答案非常简单!进入官网的icon页面,点击你所要的图标进去后里面就有icon的css类,你只要复制出来,粘贴到你的网页上就可以啦!

(注意,在所有的图标的类名前面还要加入一个"fa"类)

设置大小和颜色:学会了以上的简单使用,设置颜色和大小非常简单,只要你会用css设置文字的颜色和大小就行。即就是为这个图标添加改变颜色和大小的样式就可以啦!

其他应用:fontAwesome还有其他更加复杂一点的应用,包括固定宽度、浮动、反转、旋转、叠加图标等。官网上讲解的更好,我就不再这里重复描述了

0% (0)
0% (10)