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

网页制作 2024/11/16 佚名

3 1 2

进入阿里巴巴矢量图标库

阿里巴巴矢量图标库

选择喜欢的图标的，点击添加到库
选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用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: "&#xe61a;"; */
            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中复制，也算是一个小技巧。

总结

css,阿里巴巴矢量图标库,css,图标

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

css 横向进度条和竖向进度条实现代码

详解盒模型大小取决于它的padding，margin，border数值

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

css 横向进度条和竖向进度条实现代码

详解盒模型大小取决于它的padding，margin，border数值

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存