首页
学习
活动
专区
圈层
工具
发布

如何添加调用矢量图标库

前言 为什么站长要写一篇关于个人网站如何添加调用矢量图标库?因为图标好多,好看!!!...一、矢量图标库账号 如果您已有账号,可以忽略此步骤,如图登录方式有四种,一个是手机号注册登入,一个是Github另外一个是微博,域账号我们用不了,无论哪种都是关联账号,没有注册,选择一种登录即可,站长这边使用手机号注册...Markup 将“阿里巴巴图标代码”换成刚刚复制好的代码,如上图蓝色区域所示,右侧开启接口,点击底部保存,回到阿里巴巴图标库网站...回到网站首页,查看效果 最后,可能你会发现,图标安装之后格局有一丢丢的变化,图标大小不统一,因为默认的图标库的16号字体,网站默认使用的是14号字体,打开主题设置 >> 首页设置 >> 自定义css选项...(其他网站将此css样式加入css表即可) CSS i.icon{font-size:inherit;} 五、其他一些细节设置 点击图片会出现如下图编辑功能可以调整图标颜色,大小等等 六、总结 在矢量图标库新建一个项目

1.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    怎么使用阿里巴巴矢量图标库图文教程

    最近好久没写文章了,不为别的,就因为上周五晚上网站服务器被攻击了,原因未知,无论是百度统计还是腾讯云CDN流量情况都还算正常,跟腾讯客服沟通到凌晨,问题依旧没有解决,从而导致很多用户的主题配置无法访问,...确保数据库不会丢失,嗐,无奈啊~~~ 好了,不废话了,今天教教大家怎么设置导航图标和使用阿里巴巴代码,话说奥森图标貌似没在更新(或许是我没关注),所以在最新的主题模板明信片上将奥森图标统一换成了阿里巴巴图标库...阿里巴巴图标库:预览字体  (采用:Font class 模式) 1.首先注册阿里巴巴图标库账号 如果您已有账号,可以忽略此步骤,如图登录方式有两种,一个是Github另外一个是微博,阿里域账号我们用不了...代码格式如下: 将“阿里巴巴图标代码”换成刚刚复制好的代码,如上图蓝色区域所示,右侧开启接口,点击底部保存,回到阿里巴巴图标库...最后的最后,你会发现,图标安装之后格局有一丢丢的变化,这就是我之前说的,图标大小不统一,因为阿里巴巴默认的图标库的16号字体,主题模板默认是14号字体,打开主题设置,全局设置,添加如图代码即可解决。

    3K60

    面向设计师、开发者的开源免费图标库

    1. iconfont ---- https://www.iconfont.cn 国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。...阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具 前端 UI 框架 layui 的内置图标就是取材于阿里巴巴矢量图标库,当内置的图标不够使用时,可以在阿里巴巴矢量图标库自行查找图标进行扩展,通过 css...Remix Icon ---- http://remixicon.cn Remix Icon 是一套面向设计师和开发者的开源图标库。...适合用于小程序、移动端的底部菜单图标 3. iconPark ---- https://iconpark.oceanengine.com IconPark 图标库是一个由字节跳动出品,通过技术驱动矢量图标样式的开源图标库...Font Awesome ---- https://fontawesome.com 在很多基于 Bootstrap 的后台管理系统中都会使用到这个图标库,这个是国外的网站,访问会比较慢

    1.2K20

    【Uni-App社区小程序】005-引入自定义图标库

    一、Iconfont-阿里巴巴矢量图标库 1、基本信息 简介 Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能; 阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具...将你想要的图标加入购物车; 第二步:点击右上角购物车图标,再点击“添加至项目”,然后点击新建项目图标 第三步:输入项目名,点击“确定”即可 第四步:网页会自动跳转到如下页面 第五步:点击“下载至本地”按钮,下载图标库...得到如下文件 3、引入 第一步 :将文件夹中的iconfont.css文件复制到我们的项目 第二步:删除一些不需要的内容,如图 (1)删除内容1 (2)启动自动换行功能 (3)删除内容2 第三步:引入自定义图标库...icon-ziyuan1" style="font-size: 200rpx;"> (3)结果 (4)备注,图标对应的名字可打开下载的图标库解压后的文件夹中的

    1.2K10

    设计师必看:8处满足原型设计的矢量图标根据地

    做原型设计时,我们往往感觉图标素材不够用,尤其是矢量图标不够。 矢量图标是矢量图的一种,这种图形也叫做绘图图像,是各种设计中比较常用的图片格式之一。...今天我就和大家一起逛逛国内外比较常用的矢量图标的网站。 1. 阿里巴巴矢量图标库 在国内来说,Iconfont.cn可以说是国内设计师们的一块宝地。...这个网站上的矢量图标数量在1000个以上,而且更新也相对比较活跃,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。...我来告诉你吧,如果你已经升级到了Mockplus,那么,你会在它的图标库中发现2600多个矢量图标以及400多个平面图标。我觉得,这个很实用。...你需要做的,只是点击图标库,搜索一下。在线离线,网络稳定与否,完全不受影响。 ?

    1.7K20

    蘑菇博客前端页面如何引入矢量图标

    矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。...因此打算将原来页面中的小图标都使用矢量图标来替换,经过调查后,发现目前比较主流的矢量图标库有下面两个 阿里巴巴矢量图标库: https://www.iconfont.cn/ Fontawesome: http...://www.fontawesome.com.cn/ 本文将以阿里巴巴矢量图标为例,开始讲解矢量图标在蘑菇博客中的使用。...采购图标 首先进入阿里巴巴矢量图标库的官网 ( https://www.iconfont.cn/ )。然后输入我们需要采购的图标,这里以 Github 为例 ?...img 然后点击按钮,将刚刚采购的矢量图标下载到本地 ? 下载至本地 引入矢量图标 下载完成后,我们解压文件夹,将得到以下的内容 ?

    75830
    领券