CSS进阶篇--fontAwesome代替网页icon小图标

时间 2019-11-10

标签 css 进阶 fontawesome 代替网页 icon 图标栏目 CSS 繁體版

原文原文链接

引言

奥森图标（Font Awesome）提供丰富的矢量字体图标—经过CSS能够任意控制全部图标的大小，颜色，阴影。css

网页小图标处处可见，若是一个网页都是干巴巴的文字和图片，而没有小图标，会显得很是简陋。下面的小图标，你也可能常常会看到的，如图所示：
html

你可能说——“咱们用的都是彩色的，不是黑白的”——别着急，下面会讲到。由于它们也能够变为彩色的。前端

黑白的也好，彩色的也罢，若是用传统的“css + 图片”的方式来制做这些icon，我估计你至少得雇佣一个专业的设计师吧。通常的程序猿，包括前端程序猿，估计只能去搜索了，不会本身拿ps画。浏览器

通常状况咱们都会在网上搜索一些相关的图片，好比黑白图片的！！测试

可是问题又来了，若是你搜索来的是黑白的，如今也用黑白的，后期网站变化主题怎么办？你搜出来的是16 16的，要有个页面须要 32 32的怎么办？若是沿着这个方向考虑，你会发现，本身将在这上面耗费大量资源和精力。字体

可是若是我告诉你，有一个东西，它已经为你准备了将近500个经常使用icon图标（还在不断更新），能大能小，能随便修改颜色，彻底开源，彻底免费，你会不会心动？若是你很是着急，先去百度一下“font-awesome”，再来继续读文章不迟。网站

应用font-awesome

font-awesome当前的版本是4.2.0，我们就直接用这个版本的来讲。spa

先看看它的好处：
设计

下载

去http://www.thinkcmf.com/下载，解压以后，应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档，font文件夹中存放在着适用于不一样浏览器的字体文件。其中，css文件夹中能够只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 两个文档，其余的能够删掉。结构应该以下：
3d

简单应用

将整理好的文件夹加入到你的网站，新建一个测试页面 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> 连接</span>

此时页面将显示：

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

答案很是简单！进入官网的icon页面，里面有全部的icon的css类，就能够找到你想要的那个图标的css类了。

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

设置大小和颜色

学会了以上的简单使用，设置颜色和大小很是简单，只要你会用css设置文字的颜色和大小就行。直接看代码：

<span style="font-size:12px;"><i class="fa fa-link"></i> 连接</span>
<br />
<span style="font-size:20px;"><i class="fa fa-link"></i> 连接</span>
<br />
<span style="color:red"><i class="fa fa-link"></i> 连接</span>
<br />
<span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 连接</span>

得出的结果就是：

其余应用

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

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

综合实例

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"/>
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <style>
        html,body{width:100%;height:100%;padding:0;margin:0;}
        .login_formDiv{background: #f0f0f0;opacity: 0.8;padding: 20px;border-radius: 3px;}
        .login_formDiv .groupSame{width:252px;margin:0 auto;margin-bottom: 10px;text-align:center;position:relative;}
        .groupSame i{position: absolute;left: 10px;font-size: 24px;color: #999;top:5px;}
        .login_formDiv input{padding-left:40px;height:30px;line-height: 30px;width:210px;font-size: 14px;border:1px solid #999;}
        .login_formDiv .subtn{background: #4AB6D5 !important;padding:0;width:250px;border-radius:3px;border:1px solid #4AB6D5;cursor:pointer;font-size: 14px;color:#fff;}
    </style>
</head>
<body>
<div class="login_formDiv">
    <div class="groupSame"><input type="text" placeholder="用户名"/><i class="fa fa-user"></i> </div>
    <div class="groupSame"><input type="password" placeholder="密码"/><i class="fa fa-unlock-alt"></i></div>
    <div class="groupSame"><input type="submit" value="提交" class="subtn"/></div>
</div>
</body>
</html>

实现结果如图所示：

demo下载请点击这儿