icon矢量图标库_阿里ceo

icon矢量图标库_阿里ceo啦啦啦啦啦

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

阿里矢量图库使用方法 

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

icon矢量图标库_阿里ceo

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

 icon矢量图标库_阿里ceo

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

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

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

icon矢量图标库_阿里ceoicon矢量图标库_阿里ceo

 step3 下载需要引入的文件

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

icon矢量图标库_阿里ceo

 下载解压后的文件目录:

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

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

icon矢量图标库_阿里ceo

阿里矢量图库使用方法 

1.1 在html文件中引入

1.2 在vue项目中引入

2.icomoon使用方法


1.1 在html文件中引入

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

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

icon矢量图标库_阿里ceo

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>

Jetbrains全家桶1年46,售后保障稳定

 效果

icon矢量图标库_阿里ceo

补充:

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

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

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

1.2 在vue项目中引入

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

icon矢量图标库_阿里ceo

 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>

效果 :

icon矢量图标库_阿里ceo

!需要新增icon时,在自己建立的项目中添加好后重新下载,要将原来的引入文件全部替换后即可生效

icomoon的使用

icomoon的使用与阿里图库基本类似

step1 打开官网点击这里

icon矢量图标库_阿里ceo

 step2 点选需要的图标后点击GenerateFont下载

icon矢量图标库_阿里ceo

 step3 解压后可以直接将fonts文件夹放入需要引入的项目目录

同样这里可以查看demo.html查看中的示例教程

icon矢量图标库_阿里ceo

注意❗❗使用icomoon的时候新增icon需要这里导入selection.json

然后继续添加icon之后再重新下载替换项目中原来引入的格式文件

icon矢量图标库_阿里ceo

以上内容那里写的不对的欢迎指正~

那里不清楚的评论区一起讨论~

icon矢量图标库_阿里ceo

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207464.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号