现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。
比wordpress默认图表库的图标好看多的 默认图标库的图标一般都是灰白色简直难看死了哈哈 今天分享给大家如何插入阿里图标库的彩色图标 阿里图标库有什么好处呢 插入方便 图标样式多 彩色图标应有尽有 反正你用都用不完 重点还永久免费使用
我们在使用Taro开发小程序时，有时候需要用到ico图标，但是当Taro UI 自带的icon不能满足我们的要求时，我们需要导入第三方字体图标库。
目前大多数博客网站图标都是使用Font Awesome图标库里的图标，本站刚开始也使用了原生的图标，很多网站里面都集成了Font Awesome，使用奥森图标有很多优点，用图标代替图片，加载快，使用灵活。
用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。
最近一直在更新Vue项目中配置及使用一些内置的方法，今天讲一讲Vue项目中使用iconfont图标库，不管是管理平台还是官网展示之类的显示页面，都会用到一些小图标，如果我们用img标签，那我们的资源库会非常的大，而且后期如果我们针对图标调整大小，改色等之类的操作，就需要用到Photoshop等专业类工具，上手困难不说，而且比较麻烦，下面就说下Vue使用iconfont图标库。
这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的，示例代码也是基于此。
使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn 提供的便利，大多情况下，我们不必上传自己的图标，只需要便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。
目前自己常用的图标库有两种： 1. 插件、库里面自带的图标库：如 * boostrap * element ui * vant * layui * H-ui * mui 等等 这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库 这些图标库虽然官网都有介绍，但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。
Ionicons 是一个国外知名混合开发框架 Ionic Framework 内置的图标库。 它包含 1300 个为 Web、iOS、Android 和桌面应用程序专门定制的图标。
第一步： 进入官网，注册--登录 阿里巴巴矢量库 第二步： 图标管理---我的项目--创建项目---新建 新建项目 第三步： 进入图标库--官方图标库 开始选择图标 第四步：选中图标-- 添加入库--
e-icon-picker v2.0.10 已发布，更新日志： 1. 全自定义组件，不在依赖element-plus。 2. 新增element-plus图标组件支持。 3. 新增ts支持。 4. 修复css样式影响问题。 5. 修复zIndex异常问题。 6. 新增antd图标。 7. 新增arcoVueIcon图标。 8. 新增tdesignIcons图标。 9. 更新依赖。 image image image image image 安装 npm install e-i
前端是一个承上启下的职位，正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作，而是讲解前端如何更快更便捷的实现一些简单的设计任务，在没有设计师的情况下如何利用工具解决UI呈现的问题，让工作事半功倍。 Photoshop使用 大多数前端工程师都有过切图的经历，也就是将设计师制作的PSD等格式的图片按照需求切成项目需要的大小并实现页面的呈现，那么作为一名合格的前端工程师，我们有必要了解并熟练的掌握Photoshop的一些功能，下面介绍下几个实用的Photoshop
最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单
HTML5学堂小编的话：昨日发布的iconfont的内容有些不足，对于可能不太了解iconfont和特殊字体的学习者来说，可能会存在一定的理解问题，在此针对昨日内容进行补充，详细讲解。 字体相关知识 了解iconfont（字体图标）前我们先了解下字体，因为iconfont的实现与字体息息相关，所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course
从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，
在实践应用中，图标的使用无处不在。小到编辑器的功能按钮，大到 chrome 浏览器的任务栏，都有大量的图标需要处理。每个稍微大一点点的项目都必然需要一个图标组件。
purge-icons/packages/vite-plugin-purge-icons at main · antfu/purge-icons (github.com)
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。 本文我们就来一起学习一下iconfont字体图标库的使用吧。 效果图： 首先，搜索一下ico
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件？
icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字
蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片，在不同的分辨率上会出现失真的情况，后面在其它小伙伴的介绍下，我了解到了矢量图标。
RemixIcon 是一套简洁开放的矢量图标库，该图标库在 GitHub 上获得了 3K个Star，身边不少同事朋友对它赞赏有加，本期「有云:」邀请到了RemixIcon的作者 - 萧醇，聊聊作者本人对图标库的看法。 小编：先和大家简单介绍一下 RemixIcon 吧 萧醇： RemixIcon 是之前业余时间维护的 Side Project，是一套面向设计师和开发者的矢量图标库。 目前由个人独立绘制完成，包含 2200 多枚图标，其简洁中性的设计风格可适用于大多数行业和用户群体的互联网产品，当然也可
Ant-Design-Vue升级到2.x以上的版本之后，自带的图标库就不支持通过给组件传递一个代表指定图标的属性来使用了。
矢量图标是矢量图的一种，这种图形也叫做绘图图像，是各种设计中比较常用的图片格式之一。因为其是根据几何特性绘制，并且通过数学公式计算获得，所以，矢量图最大的特点就是可以无限根据设计需要放大或缩小，并且不会失真。那么，这么好用的矢量图标，要到哪里去找呢？今天我就和大家一起逛逛国内外比较常用的矢量图标的网站。
3.1 UDF:通用数据饲料(Universal Data Feed) 通过HTTP协议向图标库提供数据
本文是 基于Vite+AntDesignVue打造业务组件库[1] 专栏第 3 篇文章【实战案例：初探工程配置 & 图标组件热身】，我将从业务系统中最基础的图标组件入手，带着读者们练练手找找感觉，快速进入开发状态，顺便了解一些基本的前端工程配置。
Vue Tables 2旨在为开发者提供一个功能齐全的工具集，以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外，Vue Tables 2正在不断成长、改进，同时也在获得新的功能。
因为使用hexo搭建的博客中，大家并不懂都有什么图标，fa fa-xx就懵了，不知道都有什么。
地址：https://github.com/matfish2/vue-tables-2
译者：Zz招锦 https://juejin.cn/post/6922416136294252557
Tech 导读 NutUI 是一款京东风格的移动端组件库， 目前支持 Vue 和 React 技术栈，适配 Taro 多端。本文重点介绍了 Vue 4.0 版本带来的重大升级，包含 CSS 动态主题、icon 图标库、自动按需引入、新增组件、更轻量的用户体验，围绕组件丰富性、轻量化、易用性等方面，力求将组件的质量和体验提升一个台阶。
IconJar for Mac是一款强大的图标管理器，它为Mac用户提供了一个高效的方式来管理、搜索并快速访问他们的图标。IconJar for Mac是一种简单而优雅的方案，它可以帮助Mac用户更好地组织他们的图标库，并提供方便的搜索和快速访问功能。
在日常的开发过程中，前端页面经常会引用一些图标，iconfont图标库是前端开发者非常友好的在线字体图标库。大家可以根据平常所涉及的项目，收藏自己需要的图标库，方便在后续的项目中使用，今天小编给大家介绍如何通过iconfont创建自己的字体图标库，希望对大家能有所帮助！
推荐理由：可以将阿里图标库的icon、svg、unicode渲染到html的小工具 render.iconfont，可以将阿里图标库的 icon、svg、unicode 渲染到 html 的小工具，为什么要用这个组件，可以利用这个小工具快速、优雅的选择自己的想要的类型来添加自己喜欢的图标。怎么使用这个小工具，1.我们可以直接点击阿里的「iconfont」的下载代码，2.找到你下载好的代码，添加到你的项目中，3.记住你的路径，在你的 html 上，引入小工具，4.将需要图标化的容器，添加，并且定义类名或者 id，5.实例化小工具，配置项，path，描述：读取图标文件夹的路径，类型，默认值：`./icon/`，selector，描述：图标的容器，默认值，type，描述
注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式
引入魔改样式的方法很简单，自建一个css文件，然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件，然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具
具体关于路由的跳转就不多讲了，具体可以参考前面第5章vue-router之什么是编程式路由
4.新建Fwsb组件，这个相当于程序员的入口文件。在src/components/目录下新建Fwsb.vue文件。文件内容
图标，是能够吸引访问者注意力并提供更好的感官的好方法。随着Vue的兴起，更多的Vue库正在兴起，以下就为大家推荐几个Vue的图标库。
最近，在项目的开发中，我们规划了一个 Icon 组件，我们希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且，实现该 Icon 之后，理应还有一个图标选择器，可以加载出不同图标库的所有可用图标，方便直接选择使用，完整代码在文末提供。
昨天在整理电脑文件的时候，偶然发现有个文件夹里存放的是一些厂商的网络拓扑设计图标，原本想直接删掉的，不过还是决定分享给有需要的朋友，之前也分享过主流厂商的图标：
最近公司组织架构调整（反正每次组织架构调整，领导就会下场。有一个idea或者有重构一下，先定一个月底上），被拉取一个项目组做新项目。这边图标现状：有些项目是font-face方式，有些用的阿里图标库，最近又在用腾讯图标库，有些甚至直接切图。
IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库，可以实现根据单一SVG源文件变换出多种主题， 具备丰富的分类、更轻量的代码和更灵活的使用场景；致力于构建高质量、统一化、可定义的图标资源，让大多数设计师都能够选择适合自己的风格图标，并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式的组件代码，让开发者使用更高效。
字体图标显示，引入css就足够了，无需引入 layui.js，使用到模块时才必须引入js文件
按钮和图标在网页设计中扮演着重要的角色，它们是用户与网站或应用程序交互的关键元素之一。Bootstrap 是一个流行的前端框架，提供了丰富的按钮样式和图标库，使开发者能够轻松创建吸引人的界面。在本文中，我们将深入探讨 Bootstrap 中按钮和图标的使用，适合初学者，帮助他们更好地理解和应用这些元素。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
