如何使用常用的图标库
目前自己常用的图标库有两种:
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>
效果如下