web开发字体和图标的调用

字体和图标的调用

我们在前端设计时，我们往往希望改变页面的字体让页面看起来更高大上点。有时我们在设计网页时，有时也会需要用到图标（如：微信图标、音乐播放图标、甚至手机电量图标）。今天维尼就把字体和图标的调用方法分享给大家，让大家以后的设计网页更迷人。

1.字体调用

在这里插入图片描述
上图就是效果图啦，我们自行到网上下载自己喜欢的字体，然后调用就可以了（记得保存的路径喔），代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>字体调用</title>
	<style type="text/css">
	/*字体定义*/
		@font-face{
			font-family: "萌妹爱仓鼠手机字体";/*此字体名字可以自行命名*/
			src:url("萌妹爱仓鼠手机字体.ttf");/*注意字体所在路径*/
		}
		p{
			font-family: "萌妹爱仓鼠手机字体";
			font-size: 30px;
			color: blue;
		}
	</style>
</head>
<body>
	<p>欢迎光临维尼的博客</p>
</body>
</html>

我的是把Html文件跟字体文件同层的呢，你们可以自行改变，但调用时就要注意路径的关系啦。
在这里插入图片描述

哈哈，大家多下载其他更好看的字体试试，顺便给自己设计个好看的签名??。

2.图标调用

在这里插入图片描述
这是字体图标，我们可以像改变文字颜色或字体大小一样来改变图标的样式，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/font-awesome.min.css"><!-- 导入图标css文件 -->
	<style type="text/css">
	    .fa{
	    	color:blue;
	    	font-size: 46px;
	    	margin-right: 15px;
	    }

	</style>
</head>
<body>
	<i class="fa fa-weixin"></i>
	<i class="fa fa-play"></i>
	<i class="fa fa-bicycle" aria-hidden="true"></i> 
	/*字体图标的引入与所以标签无关，只跟class=“ ”有关*/
	<div class="fa fa-play"></div>

</body>
</html>

看了代码可能有人会疑问，i标签不是用来设置文字斜体的吗，为什么用在这里呢？嘿嘿，疑问没错，但我们引入字体图标时，用哪个标签无所谓的呢，小编也用了div标签来验证了，只跟代码中的class=" "内容有关。我们需要实现下载好图标工具http://www.fontawesome.com.cn/（通过该链接下载），进入网址之后步骤如下：
在这里插入图片描述

下载完解压后就是如下如下内容了：

但这里我们只用到css文件里的font-awesome.min.css文件

我们写html文件时，就把该css文件导进去就行啦，我们要用什么图标可以网上查询的，还是刚刚那链接进去

点进去之后我们就可以看到有很多图标啦
在这里插入图片描述
找自己需要的图标点进去

然后我们就可以复制图标名称了或者把整块标签源码复制过去（i标签是常用）。当我们复制过来之后，我们下载的css文件会帮我们显示标签的（记得把要用的css文件导进html文件中）可能步骤看起来很多，但下载和用起来也不难。赶快动起手来去尝试啦，小编很用心啦，若有不足请多多谅解与指导?。