矢量库推荐与使用

山楂树下的吉他男孩

已于 2022-07-24 22:36:57 修改

阅读量544

点赞数 1

于 2022-06-29 20:02:08 首次发布

本文链接：https://blog.csdn.net/m0_63544378/article/details/125527971

版权

关键词由CSDN通过智能技术生成

在我们写代码的时候我们常常需要用到矢量图标，今天小编给大家推荐一个好用的矢量图库就是我今天说的阿里巴巴矢量库，他的里面有许多的矢量图标。

阿里云矢量图库：iconfont-阿里巴巴矢量图标库

一.如何使用。

1.打开网页找到你所需要的矢量图将他添加到购物车里：

温馨提示：如果你需要很多就将它添加到项目里面。

2.到项目里面，它里面有一个下载至本地：

3.如果你想简单使用你可以使用 Font class 模式：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

记住不要盲目复制，具体看你的那个文件包的位置。

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

4.如果需要色彩，你就需要用 Symbol 模式：

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

二. 具体引用（附代码）

1.如果使用 Font class

2.如果使用 Symbol

这两个引用的包是不一样的，大家引用的时候需要注意。

3.具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./font_3490973_ktev13kvj8c/iconfont.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .icon {
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        li{
            list-style: none;
        }
        span{
            font-size: 24px;
            margin-left: 5px;
        }
        div{
            border: 1px solid black;
            width: 300px;
        }
    </style>
</head>
<body>
    <div>
        <h1>全部分类</h1>
        <ul>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-meishi1"></use>
                </svg>
                <span>美食</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-waimai"></use>
                </svg>
                <span>外卖</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiudian"></use>
                </svg>
                <span>酒店</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-minsu_"></use>
                </svg>
                <span>民宿</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-kandianying"></use>
                </svg>
                <span>电影</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-huochepiao"></use>
                </svg>
                <span>机票/火车票</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-KTV"></use>
                </svg>
                <span>休闲娱乐/KTV</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shenghuofuwu"></use>
                </svg>
                <span>生活服务</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon--s-yiliaojiankang"></use>
                </svg>
                <span>医疗健康/宠物/爱车</span>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiuba"></use>
                </svg>
                <span>酒吧/密室逃脱</span>
            </li>
            
        </ul>
    </div>
</body>
</html>

效果如下：