get几个小技能：图标库使用技巧，css3文本小技巧

不愿意做鱼的小鲸鱼

发布于 2022-09-24 09:11:07

9010

发布于 2022-09-24 09:11:07

文章被收录于专栏：web全栈web全栈

如何使用常用的图标库

目前自己常用的图标库有两种： 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>

效果如下