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)
blank

相关推荐

  • linux pycharm2021年激活码刚出【中文破解版】

    (linux pycharm2021年激活码刚出)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • 接口400是什么错误_接口报500是什么错误

    接口400是什么错误_接口报500是什么错误原文地址:https://blog.csdn.net/lw1242189467/article/details/80048407首先,遇到400问题,最大几率是出现了数据类型不一致的问题,简单来说是Controller层不用正确读取你发送请求附带的参数。该例是我前端传送JSON格式,使用postmen接收。一.发现400错误的,第一步确认postmen中发送的数据类型是json。比如Headers中Content-Type类型是application/json;或是前端代码Ajax中添加:conten

  • 单目视觉定位测距的两种方式[通俗易懂]

    单目视觉定位测距的两种方式[通俗易懂]单目定位和双目定位的选择,我觉得主要还是成本和时间的考虑。之前也尝试过双目定位,感觉要更精准些,但双目测距需要对两幅图像进行图像变换和极线匹配,稍微耗时了一些。这几天尝试了一下单摄像头进行测距定位,主要有两个思路:  1.定位测量插值得到每个像素的实际坐标    该方法总觉得有很大的问题:一个是摄像头安装后就必须固定不动,稍微的旋转都会导致之间测量的像素点对应的坐标偏移。另一个是人工测量的

  • 数据库设计工具介绍

    数据库设计工具介绍本文将从如下四个方面和您一起比较四种优秀数据库设计工具的各自优缺点。用户界面可支持的数据库数据工具售价1.DbSchema官网:https://dbschema.com/DbSchema是一种可用于复杂数据库设计和管理的可视化工具。该工具已经集成在大多数主流操作系统之中。用户界面DbSchema具有友好的用户界面,可简化数据库的设计。它能够为管理大型数据库提供友好的界面布局,以便用户更专注于数据库的特定功能。如下图所示,DbSchema界面能够让用户自由地浏览各种视图,在布局中拖放表格,

  • 三种方法遍历二叉树_java遍历arraylist

    三种方法遍历二叉树_java遍历arraylistArrayList的多种遍历方法

  • IDEA开发工具使用 git 创建项目、拉取分支、合并分支「建议收藏」

    IDEA开发工具使用 git 创建项目、拉取分支、合并分支「建议收藏」工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下:假设小组中有两个人,组长小张,组员小袁场景一:小张创建项目并提交到远程Git仓库场景二:小袁从远程Git仓库上获取项目源码场景三:小袁修改了部分源码,提交到远程仓库场景四:小张从远程仓库获取小袁的提交场景五:小袁接受了一个新功能的任务,创建了一个分支并在分支上开发场景六:小袁把分支提交到远程Git仓库场景七:小张获取小袁提交的分支场景八:…

发表回复

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

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