字体图标的下载
http://icomoon.io
字体图标的使用
- 把下载包里面的fonts 文件夹放入页面根目录下
- 在CSS样式中全局声明字体 : 简单理解把这些字体文件通过css引入到我们页面中
- html标签内添加小图标
- 给标签声明字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color: blue;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
字体图标的追加
CSS三角
给一个盒子设置高度和宽度都是0, 再给每个边框不同的颜色
所以三角形就是给三个边一个透明边框, 给另外一个边框设置一个实线边框, 就是一个三角形
CSS三角实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.jd {
position: relative;
width: 120px;
height: 250px;
margin: 60px auto;
background-color: pink;
}
.jd span {
position: absolute;
top: -10px;
right: 20px;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>