阿里矢量图库&icomoon的icon引用方法

最新推荐文章于 2024-06-18 13:32:42 发布

斑马的blog

最新推荐文章于 2024-06-18 13:32:42 发布

阅读量1.1k

点赞数 1

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/qq_41246394/article/details/116863928

版权

阿里矢量图库使用方法

step1：找到你需要的图标，并将需要的图标加入购物车

鼠标放在你需要的图标上就会显示加入购物车标识

step2 点击右上角购物车标志，将需要的icon添加☞项目

这里也可以点击“下载代码”按钮下载需要引入的文件，添加☞项目方便后续添加新的icon

如果没有项目点击“添加至项目新建”

step3 下载需要引入的文件

导航栏资源管理==》我的项目==》点击下载==》下载至本地

下载解压后的文件目录：

demo_index.html是示例教程可以先打开看看

.ttf .woff .woff2 为了兼容不同浏览器是表示icon的一些格式文件吧，类似平常我们设置字体样式一样，也需要对应的样式文件（个人理解）

1.1 在html文件中引入

step1 在工程根目录新建一个文件夹，与.html同级目录

将解压出的文件除去带有demo字样的其他文件，复制到新建的文件夹中

step2 引入

<!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>
    <!-- -----------------看这里🌼---------------------- -->
    <link rel="stylesheet" href="./alifonts/iconfont.css" type="text/css" />
    <!-- 使用灰色图标，只需要加载iconfont.css 文件就可以使用了 -->
    <!-- -----------------看这里🌼---------------------- -->
    <script src="./alifonts/iconfont.js"></script>
    <!-- 使用彩色图标一般使用svg格式引入，需要添加这个js文件 -->
</head>

<body>
     <!-- --------这个是unicode引用(灰白黑)🌼------>
    <span class="iconfont">&#xf4cf;</span>
     <!-- --------这个是svg方式引用(彩色)🌼------>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-aixin"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-baocun"></use>
    </svg>
</body>

</html>

效果

补充：

1.font-class引用方式这里没有做测试，具体的使用方法都可以参考解压文件中的demo_index.html

2.unicode 兼容性好，svg兼容性ie9+

3.这里的icon可以当作字体一样来使用，设置字体样式的属性，在icon身上同样有效

1.2 在vue项目中引入

step1 在项目src->assets下新建文件夹fonts 将一下文件复制到新建文件夹中（与1.1相似）

step2 在main.js中引入

import Vue from 'vue'
import App from './App'
import router from './router'
//------------看这里是🍟🍔🌭-------/
// 在这里引入css 和js js对应svg格式(彩色)
import './assets/fonts/iconfont.css'
import './assets/fonts/iconfont.js'
router.push('home')

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

step3.在home.vue中使用

<template>
    <div>
        hello home home home home page!
        <i class="iconfont">&#xf4cf;</i>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-aixin"></use>
        </svg>

        <button @click="getnewpage">homepage</button>
    </div>
</template>

效果：