阿里矢量图标库的使用

阿里矢量图标库的使用1、注册登录账号网站地址:https://www.iconfont.cn/该网站可通过GitHub或新浪账号进行登录下面是网站的首页2、查找图标在中间输入框输入想要查找的图标,。以‘home

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1、注册登录账号

网站地址:https://www.iconfont.cn/

该网站可通过GitHub或新浪账号进行登录

下面是网站的首页

阿里矢量图标库的使用

2、查找图标

在中间输入框输入想要查找的图标,。以‘home’为例,点击搜索,即可得到以下页面。

阿里矢量图标库的使用

3,将图表添加至项目。

选中自己需要的图标,将其添加入库,这时再点击页面右上角的购物车图标

阿里矢量图标库的使用阿里矢量图标库的使用

弹出以下页面,点击添加至项目,如果是新建项目,点击右边的加号图标,然后点击确定

 

 

 

阿里矢量图标库的使用阿里矢量图标库的使用

4,在项目中使用图标

添加至项目后会跳转至以下页面,左边显示项目的名称,右上角可以添加项目成员,共享这些图标。要使用这些图标的话就需要下载至本地了。

阿里矢量图标库的使用

点击下载至本地,会得到一个压缩文件,解压文件,得到以下内容

阿里矢量图标库的使用阿里矢量图标库的使用

阿里矢量图标库的使用

将上图5个文件放入项目的目录下,并在main.js文件中引入css文件。

用浏览器打开fontclass.html文件,将图标的类名添加至 i 标签即可,如下所示。

阿里矢量图标库的使用

<class=”iconfont icon-home”></i>

 

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/166409.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 为什么电脑压缩文件图标突然变成这样了

    为什么电脑压缩文件图标突然变成这样了

    2021年9月24日
    48
  • webApp开发心得「建议收藏」

    webApp开发心得「建议收藏」从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟!webapp使用JavaScript修改页面;紧接着再从服务器传递更多数据然后再修改页面,如此循环。从性能的角度看,在现代浏览器中单页面WebApp已经能够和普通native应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器…

    2022年6月29日
    23
  • 项目管理小小知识点总结

    项目管理,有许多知识点需要日常中总结和积累,从这里开始吧:1、项目沟通渠道数计算公式:[N*(N-1)]/2分子可知数量级为:N的平方。2、水晶头个数计算:N*4*1.153、信息化6大要素

    2021年12月25日
    43
  • 单选钮和复选框控件的应用教案_在mfc中弹出一个窗口

    单选钮和复选框控件的应用教案_在mfc中弹出一个窗口单选按钮#include <windows.h>LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);HINSTANCE hInst;int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR szCmdLine,…

    2022年8月18日
    15
  • Python基本数据类型「建议收藏」

    Python基本数据类型「建议收藏」一、简介Python基本数据类型一般分为:数字、字符串、列表、元组、字典、集合这六种基本数据类型。其中数字又包含整型(整型又包括标准整型、长整型(Python2.7及之前版本有))、浮点型、复数类

    2022年7月5日
    22
  • GD32 RT-Thread Nano+FinSH组件

    GD32 RT-Thread Nano+FinSH组件一、FinSH组件的命令执行流程图二、执行环境1.芯片:GD32F10x2.串口: #defineFINSH_UART USART1 #defineFINSH_UART_CLK RCU_USART1 #defineFINSH_TX_PIN GPIO_PIN_2 …

    2022年5月21日
    88

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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