一、前言
在传统的网页制作过程中,涉及图标的情况大多用图片进行处理,图片有优势也有不足。例如,使用图片会增加总文件的大小和很多额外的“http 请求”,增大服务器的负担,并且大量图片下载需要时,增加用户的等待时间,牺牲用户体验。另外,图片通常都是矢量图,在移,动端高分辨率屏上会变得模糊,因此,有时候在“响应 式设计”中需要使用图标的最佳解决方案就是不去使用图片,而字体通常是矢量的,所以就解决了图片的缺点,即图标字体化。自定义图标字体是比较麻烦的,而font-awesome为用户准备了将近500个常用icon图标(并且还在不断更新),能大能小,能随便修改颜色,完全开源,且完全免费。
二、下载
font-awesome其实就是一个图标工具,当前最新版本是4.7.0
首先,我们可以去https://fontawesome.dashgame.com/这个网站进行下载,同样,也可以在GitHub上进行下载,下载地址是https://github.com/FortAwesome/Font-Awesome。font-awesome是完全开源,且完全免费。在解压后,打开文件夹可以看到如图所示的文件夹。
在上面和这个图中,我们只需要关注css 和fonts 这两个文件夹。fonts文件夹中有我们需要的字体文件,css文件夹里面是该工具提供的css文件。我们在使用时需要将这两个文件夹粘贴复制到我们建立的项目中。如图所示
三、font-awesome初步应用
接下来我们通过下面一段简单的代码展示如何使用font-awesome。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-awesome</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-weixin " style="font-size: 5em "></i>
</body>
</html>
【代码分析】
使用链接式嵌入font-awesome.min.css的css样式表,通过<i class="fa fa-weixin " style="font-size: 5em "></i>
来调用图标。用游览器打开上段代码我们可以看到如图所示。
font-awesome为用户准备了将近500个常用icon图标(并且还在不断更新),能大能小,能随便修改颜色。具体的图标以及调用方式我们可以在官网上查看。如下图所示。图标对应着名称。
四、font-awesome小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web字体图标的应用</title>
<!--嵌入awesome字体css文件-->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<style>
body{
background-color: #878787;
}
.section{
background-color: #3e3e3e;
height: 500px;
width: 800px;
margin:0 auto;
}
h2,h3,h4{
color: white;
text-align: center;
margin: 30px;
}
.section-top{
padding-top: 20px;
}
.awesome{
width: 100%;
height: 100%;
padding-top: 20px;
}
.weixin,.apple,.desktop,.laptop{
width: 200px;
height: 150px;
float: left;
}
.fa{
margin-left: 55px;
}
.fa-apple{
margin-left: 65px ;
}
.section-center p{
color: white;
text-align: center;
}
@font-face {
font-family: my font;
src: url('fonts/书法家行书体.TTF');
font-weight: normal;
font-style: normal;
}
h2{
font-size: 4rem;
font-family: "华文行楷";
}
h3{
font-family: "Microsoft YaHei UI";
font-size: 2rem;
}
</style>
</head>
<body>
<div class="section">
<div class="section-top">
<h2>One Web , Any Device</h2>
<h3>万物互连,极致体验</h3>
<div class="section-center">
<h4>【HTML5】全面兼容移动设备</h4>
<h4>颠覆原生应用指日可待,传智播客重新定义前端开发</h4>
<div class="awesome">
<div class="weixin">
<i class="fa fa-weixin " style="font-size: 5em ;color:white"></i>
<p>微信公众平台开发</p>
</div>
<div class="apple">
<i class="fa fa-apple " style="font-size: 5em ;color:white"></i>
<p>原生移动APP开发</p>
</div>
<div class="desktop">
<i class="fa fa-desktop " style="font-size: 5em ;color:white"></i>
<p>网站开发</p>
</div>
<div class="laptop">
<i class="fa fa-laptop " style="font-size: 5em ;color:white"></i>
<p>桌面应用开发</p>
</div>
</div>
</div>
</div>
</div>
</body>
使用游览器打开上述代码我们可以看到如下界面。