CSS

get几个小技能:图标库使用技巧,css3文本小技巧

Nick · 2月25日 · 2020年本文3651字 · 阅读10分钟957

如何使用常用的图标库

目前自己常用的图标库有两种:
1. 插件、库里面自带的图标库:如
* boostrap
* element ui
* vant
* layui
* H-ui
* mui
等等
这些ui框架官方文档上都有详细的介绍使用说明
2. 常用图标库
* Font Awesome图标库
* iconfont 阿里图标库
这些图标库虽然官网都有介绍,但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。

Font Awesome图标库

我觉得使用图标库最重要的是能知道有哪些图标,然后再检查是否有自己需要二等图标,所以官方文档极其重要。
使用该图标库有两种方法
1. 正常的从官网中下载图标库,然后再文件中将一堆文件导入,这样做显然很麻烦,但是相对稳定。
2. 就是CDN的方法啦。
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
可以在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>

效果如下
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
只要从CDN中导入一个对应版本Font Awesome的css链接,就可以根据图标库来使用对应的图标了。

iconfont 阿里图标库

iconfont 阿里图标库是一个可以按需导入的图标库,就是可以在官网中自己选择要用的图标放在收藏列表中,然后可以一键下载对应的图标的样式和使用文档,非常方便。
值得一提的是:阿里图标库中有很多炫彩的图标可供选择,表清包等,还可以自己制作

iconfont 阿里图标库使用步骤:
1. 在官网中选择想用的图标集
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
2. 收藏对应的图标
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
3. 下载对应的代码文件
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
4. 解压后就可以直接使用了
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
其中 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>

效果如下
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客
都是字体图标

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>

效果如下
get几个小技能:图标库使用技巧,css3文本小技巧-左眼会陪右眼哭の博客

0 条回应
在线人数:1人 来访统计
说谎
林宥嘉
隐藏