CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)-偶像资源网

进入阿里巴巴矢量图标库

选择喜欢的图标的，点击添加到库
选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）
然后在右侧中点击添加至项目
之后在个人主页中可以看见

1.Unicode
2.Font class

此次便是对于这两个的使用

Unicode

开始进入时，会自动生成代码，如果没有，则点击生成
例:

@font-face {
  font-family: \'iconfont\';  /* project id 1743720 */
  src: url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.eot\');
  src: url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix\') format(\'embedded-opentype\'),
  url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2\') format(\'woff2\'),
  url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.woff\') format(\'woff\'),
  url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf\') format(\'truetype\'),
  url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont\') format(\'svg\');
}

其中最最关键的是iconfont

同时，我们还需要修改其对应的url路径

以第一个举例

<!--原来的url-->
src: url(\'//at.alicdn.com/t/font_1743720_lf0mzduk11.eot\');
<!--修改后的的url,打开浏览器之后访问一下对应的url，提示下载eot文件则修改成功-->
src: url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot\');

Unicode中对于图标的引用如下

在刚刚的个人页面中，选中Unicode可以看见加入的图标都在下面,以搜索举例

鼠标滑上去以后可以看见复制代码的图标，点击复制

以下为实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标使用</title>
    <style>
        @font-face {
            font-family: \'iconfont\';  /* project id 1743720 */
            src: url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot\');
            src: url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix\') format(\'embedded-opentype\'),
            url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2\') format(\'woff2\'),
            url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff\') format(\'woff\'),
            url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf\') format(\'truetype\'),
            url(\'https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont\') format(\'svg\');
        }

        .wrapper {
            width: 1090px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0px auto;
            text-align: center;
        }

        .iconTest::before {
        	/*此处为复制来的图标代码，修改为以下形式*/
            /* content: ""; */
            content: "\\e61a";
            font-family: "iconfont";
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <span class="iconTest"> : Hello CSS</span>
        </div>
    </div>
</body>
</html>

效果图

###Font Class中对于图标的引用

这个就要简便很多了

在图标库个人主页的Unicode旁边就是Fonte Class点击，再任选一个图标，复制代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标使用</title>
    <!--以引入css资源的方式使用，url同样修改一下，加入https://-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
    <style>
        .wrapper {
            width: 1090px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0px auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
        	<!--iconfont表示这个是一个图标样式-->
        	<!--icon-sousuot表示这个是图标中的搜索-->
            <span class="iconfont icon-sousuo"></span><span> : Hello CSS</span>
        </div>
    </div>
</body>
</html>

更加简便的使用

有时候，一个复杂的网页包含各种图标的引用，例如导航栏每个栏目的前面都要一个图标，这个便用到了了::before,而同样后面有时候又要用span来引用图标，这时，我们便可以引入Font-Class中的使用方法却达到了两种场景的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标使用</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
    <style>
        .wrapper {
            width: 1090px;
            height: 300px;
            background-color: antiquewhite;
            margin: 0px auto;
            text-align: center;
        }

        .iconTest::after {
            content: "\\e61a";
            font-family: "iconfont";
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hello CSS</span>
        </div>
    </div>
</body>
</html>

效果便是Hello CSS前后都有搜索图标

原因：打开引入的css我们可以发现其中也包含了Unicode，因此之后的使用只需要引入Font-Class即可，而图标对应的十六进制编码在Unicode中复制，也算是一个小技巧。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Html/CSS
# 编程开发 # CSS

CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

请登录后发表评论