如何使用常用的图标库
目前自己常用的图标库有两种：
1. 插件、库里面自带的图标库：如
* boostrap
* element ui
* vant
* layui
* H-ui
* mui
等等
这些ui框架官方文档上都有详细的介绍使用说明
2. 常用图标库
* Font Awesome图标库
* iconfont 阿里图标库
这些图标库虽然官网都有介绍，但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。
Font Awesome图标库
我觉得使用图标库最重要的是能知道有哪些图标，然后再检查是否有自己需要二等图标，所以官方文档极其重要。
使用该图标库有两种方法
1. 正常的从官网中下载图标库，然后再文件中将一堆文件导入，这样做显然很麻烦，但是相对稳定。
2. 就是CDN的方法啦。
可以在cdn查询结果中，按需使用不同版本的链接导入
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="nofollow noopener" rel="nofollow noopener" rel="stylesheet">
示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="nofollow noopener" rel="nofollow noopener" rel="stylesheet">
</head>
<body>
<i class="fa fa-weixin" aria-hidden="true"></i>
<i class="fa fa-qq" aria-hidden="true"></i>
<i class="fa fa-chrome" aria-hidden="true"></i>
</body>
</html>
效果如下
只要从CDN中导入一个对应版本Font Awesome的css链接，就可以根据图标库来使用对应的图标了。
iconfont 阿里图标库
iconfont 阿里图标库是一个可以按需导入的图标库，就是可以在官网中自己选择要用的图标放在收藏列表中，然后可以一键下载对应的图标的样式和使用文档，非常方便。
值得一提的是：阿里图标库中有很多炫彩的图标可供选择，表清包等，还可以自己制作
iconfont 阿里图标库使用步骤：
1. 在官网中选择想用的图标集
2. 收藏对应的图标
3. 下载对应的代码文件
4. 解压后就可以直接使用了
其中 demo_index.html 相当于使用文档
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./icons//iconfont.js"></script>
<title>图标展示</title>
<style>
.icon {
width: 5em;
height: 5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.box {
width: 800px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-kaixin" rel="nofollow noopener" ></use>
</svg>
笑脸
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tiaopi" rel="nofollow noopener" ></use>
</svg>
调皮
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bianbian" rel="nofollow noopener" ></use>
</svg>
便便
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixin1" rel="nofollow noopener" ></use>
</svg>
爱心
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dangaox" rel="nofollow noopener" ></use>
</svg>
蛋糕
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zuanshix" rel="nofollow noopener" ></use>
</svg>
砖石
</div>
</body>
</html>
效果如下
都是字体图标
css3文本排版小技巧
1. 字体库的应用
下载字体库：点击这里
使用 @font-face 可以使用字体自定义字体
@font-face {
font-family: myfont;
src: url('./字体库/书法.ttf');
}
.txt {
font-family: myfont;
}
2.文本多列布局
把 div 元素中的文本分隔为两列：
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
column-gap 属性规定列之间的间隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
column-rule 属性设置列之间的宽度、样式和颜色规则。
div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
分列后每一列的宽度
div
{
-moz-column-width: 400px; /* Firefox */
-webkit-column-width: 400px; /* Safari and Chrome */
column-width: 400px;
}
示例如下
<!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>
body {
background-image: url('./images/bg1.png');
background-size: cover;
background-repeat: no-repeat, repeat;
}
@font-face {
font-family: myfont;
src: url('./字体库/书法.ttf');
}
.txt {
width: 1224px;
padding: 30px;
line-height: 1.75em;
margin: 20px auto;
font-family: myfont;
box-sizing: border-box;
-webkit-column-count: 2;
-webkit-column-width: 500px;
-webkit-column-gap: 100px;
-webkit-column-rule: 3px solid #ccc;
text-indent: 2em;
font-size: 18px;
}
</style>
</head>
<body>
<div class="txt">
<h2>2020.1.18</h2>
<p>
想着有很多话想写的，可是一下子又什么都不想了。我不知道一个人失去了最重要的东西之后会变成什么样子，可能是像我这样，变成对所有的事情都不想关心，对所有的东西都失去兴趣，对未来没有任何期待，，如果对未来都没有期待，那这个人大概就行尸走肉了吧，这不该是一个人的青春。为何会这样，可能不是因为失去这个东西真正的原因吧，而是对失去的东西的那种敬畏之心。就像是失恋，可能并不是因为那个人怎么样，因为那个人会从恋到不恋，肯定是有什么东西让他变得判若两人，也或许是你根本不了解这个人的真面目。如果不是敬畏之心，如果没有属于自己的原则，哪里来的悲伤呢？就像大多数人一样，失去了也没什么关系，只是因为自己有了新的期望，，，能和她在一起也是可能是因
为专一吧，因为当时确实是这样说的。</p>
<p>如果我也能无所谓，或者没有了敬畏之心，也就不会这么痛苦了吧。可是这样也就变成了最讨厌的自己，，，，
</p>
</div>
</body>
</html>
效果如下
