CSS之fontAwesome代替网页icon小图标

发布时间:2020-12-28 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了CSS之fontAwesome代替网页icon小图标编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

引言

奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。

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

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

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

 

一般情况我们都会在网上搜索一些相关的图片,比如黑白图片的!!

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

但是如果我告诉你,有一个东西,它已经为你准备了将近500个常用icon图标(还在不断更新),能大能小,能随便修改颜色,完全开源,完全免费,你会不会心动?如果你非常着急,先去百度一下“font-awesome”,再来继续读文章不迟。

应用font-awesome

font-awesome当前的版本是4.2.0,咱们就直接用这个版本的来说。

先看看它的好处:

下载

http://www.thinkcmf.com/下载,解压之后,应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档,font文件夹中存放在着适用于不同浏览器的字体文件。其中,css文件夹中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 两个文档,其他的可以删掉。结构应该如下:

简单应用

将整理好的文件夹加入到你的网站,新建一个测试页面 demo.html,将css文件夹中的两个css文件,引入到页面。

<link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<!--[if IE]>
<link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->

如上代码,如果是IE浏览器,需要引入 font-awesome-ie7.min.css ,因为fontAwesome支持IE7+浏览器的。

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

span><i class="fa fa-link"></i> 链接</>

此时页面将显示:

显示是显示出来了,那么对应链接的这个css类“fa-link”我是从哪里找来的呢?

答案非常简单!进入官网的icon页面,里面有所有的icon的css类,就可以找到你想要的那个图标的css类了。

(注意,在“fa-link”前面还要加入一个“fa”类,例如 <i class="fa fa-link">)

设置大小和颜色

学会了以上的简单使用,设置颜色和大小非常简单,只要你会用css设置文字的颜色和大小就行。直接看代码:

span style="font-size:12px;">
br ="font-size:20px;"="color:red"="color:white;background-color:#003399;">

得出的结果就是:

其他应用

fontAwesome还有其他更加复杂一点的应用,包括固定宽度、浮动、反转、旋转、叠加图标等。

官网上讲解的更好,我就不再这里重复描述了,可以去http://www.thinkcmf.com/font/examples查阅这些应用的例子。

 

综合实例

html代码:

<!DOCTYPE htmlhtmlhead>
    meta charset="utf-8"/>
    titletype="text/css"="stylesheet" href="css/font-awesome.min.css"[if IE]>
    <link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"/>
    <![endif]-->
    >
        html,body{width:100%;heightpadding0margin}
        .login_formDivbackground #f0f0f0opacity 0.8 20pxborder-radius 3px
        .login_formDiv .groupSame252px0 automargin-bottom 10pxtext-aligncenterpositionrelative
        .groupSame i absoluteleftfont-size 24pxcolor #999top5px
        .login_formDiv inputpadding-left40px30pxline-height 30px210px 14pxborder1px solid #999
        .login_formDiv .subtn #4AB6D5 !important250px3px1px solid #4AB6D5cursorpointer#fff}
    bodydiv ="login_formDiv"="groupSame"input ="text" placeholder="用户名"/><="fa fa-user"> div="password"="密码"="fa fa-unlock-alt"="submit" value="提交" class="subtn"/></>

实现结果如图所示:

demo下载请点击这儿

总结

以上是编程之家为你收集整理的CSS之fontAwesome代替网页icon小图标全部内容,希望文章能够帮你解决CSS之fontAwesome代替网页icon小图标所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!