大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
阿里矢量图库使用方法
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"></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"></i>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixin"></use>
</svg>
<button @click="getnewpage">homepage</button>
</div>
</template>
效果 :
!需要新增icon时,在自己建立的项目中添加好后重新下载,要将原来的引入文件全部替换后即可生效
icomoon的使用
icomoon的使用与阿里图库基本类似
step1 打开官网点击这里
step2 点选需要的图标后点击GenerateFont下载
step3 解压后可以直接将fonts文件夹放入需要引入的项目目录
同样这里可以查看demo.html查看中的示例教程
注意❗❗使用icomoon的时候新增icon需要这里导入selection.json
然后继续添加icon之后再重新下载替换项目中原来引入的格式文件
以上内容那里写的不对的欢迎指正~
那里不清楚的评论区一起讨论~
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207464.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...