💬个人网站：【芒果个人日志】 💬原文地址：Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn) 💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要：在开发网页的过程中，我们
图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。
字体图标显示，引入css就足够了，无需引入 layui.js，使用到模块时才必须引入js文件
我们在使用Taro开发小程序时，有时候需要用到ico图标，但是当Taro UI 自带的icon不能满足我们的要求时，我们需要导入第三方字体图标库。
在实践应用中，图标的使用无处不在。小到编辑器的功能按钮，大到 chrome 浏览器的任务栏，都有大量的图标需要处理。每个稍微大一点点的项目都必然需要一个图标组件。
从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，
Android开发,对于状态栏的修改,实在是不友好,没什么api可以用,不像ios那么方便.但是ui又喜欢只搞ios一套.没办法.各种翻源码,写反射.真的蛋疼.
前端是一个承上启下的职位，正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作，而是讲解前端如何更快更便捷的实现一些简单的设计任务，在没有设计师的情况下如何利用工具解决UI呈现的问题，让工作事半功倍。 Photoshop使用 大多数前端工程师都有过切图的经历，也就是将设计师制作的PSD等格式的图片按照需求切成项目需要的大小并实现页面的呈现，那么作为一名合格的前端工程师，我们有必要了解并熟练的掌握Photoshop的一些功能，下面介绍下几个实用的Photoshop
本文只针对handsome主题，也是综合了在hexo和部分typecho主题中引入矢量图标的经验及网络上已有教程进行经验总结分享交流，有出入的地方还望大家指出，共同交流进步。
之前很老的一个 webpack3 前端项目，用 vue-cli5 重构了一下，根据 vue-cli 文档安装的 sass 版本 ^1.32.7，sass-loader 版本 ^12.0.0，各种自测感觉没问题了就部署到线上了。
注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式
本文是 基于Vite+AntDesignVue打造业务组件库[1] 专栏第 3 篇文章【实战案例：初探工程配置 & 图标组件热身】，我将从业务系统中最基础的图标组件入手，带着读者们练练手找找感觉，快速进入开发状态，顺便了解一些基本的前端工程配置。
公司现在已有一整套的Icon，那我们应该如何绘制一个Icon，让其风格与之前的保持统一呢。
我们需要把它裁切并转成svg格式再生成字体图标，比较繁琐，而我新系统目前也没有装相应软件，所以这里不采用这些图标，选用网上已有类似的字体图标来代替。
---- 「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」 这是官网描述的：✈️ 当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式） tabbar 的页面展现过一次后就保留在内存中，再次切换 t
一般来说，我们的个人博客都会放上一些社交图标以及社交链接。这样一来，想要关注我们更多的最新研究或工作的读者就可以很快找到路径。于是，在 Jekyll 博客主题设计的时候，通常会在个人简介的地方放置几个社交小图标，点击社交小图标即可把读者带到你的社交个人主页上。对于不同类型的作者，常用的或者关注的社交平台基本上不大一样，社交小图标也会有不一样的需求。比如说，对于从事科研工作的人来说，像谷歌学术、ResearchGate、ORCID 等等能够列举发表论文或者相关研究的平台就比较重要；对于一般程序员来说，像 Github、Gitlab、Segmentfault、CSDN、简书等等能够展示自己所参与的项目和技术心得体会的平台就比较重要；对于前端设计师来说，像 Instgram、UI 中国、Dribble等等能够展示 UI 设计作品的平台就比较重要。因此，对于一款 Jekyll 博客主题的设计者来说，同时要兼顾到这么多不同的需求可能会有点为难，毕竟领域不同、了解的程度也很有限。
好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。
Varlet提供了一些常用的图标，图标都来自 Material Design Icon。
面试官：你认为前端工作中最重要的是什么？ 答：用户体验！ 面试官：如何可以提升用户体验？ 答：从提升项目性能开始！ 面试官：如何才能提升项目性能呢？ 答：对项目进行优化! 面试官：如何对项目进行优化？ 答：主要从项目加载时以及运行时两方面进行优化。 面试官：如何进行加载时的优化？ 答：主要从以下几方面入手： CSS 写头部，JavaScript 写底部：所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就会空白了，所以 JS 文件要
导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。
点进去之后，在其中选择你想要的图标，如果觉得不够用的话，可以点击左下角选择生成更多的图标
icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字
前端开发离不开图标，会有一部分直接使用图片引进，但是在性能上来说对用户体验不是很好。
项目名称：品优购 项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作
hexo+github搭建专属个人博客的教程很多，这里也就不再介绍了，当然你也可以点击阅读原文查看。但是在初始搭建完成后，需要进行很多配置，使得网站功能更加健全，因此本文主要介绍网站的功能补全和优化。
点击右边列表”new set from selection“可选择你自己的svg图用于转换为字体图标
随着前端技术的发展，有越来越多的方法实现icon的制作，同时为了满足市面上各种大屏幕分辨率，字体图标icon font应运而生，字体图标的制作也是一种全新的设计方式，但是icon font 在wind
Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果，让web开发更迅速、简单。
CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易.
最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单
Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。
本教程是一个H5音乐播放的详情页制作，实现了H5音乐播放，音轨的跳动，已经较为酷炫的UI界面。 通过本教程，您会学到： 1、H5音乐播放 （带音轨） 2、iconfont字体图标库 3、div+css
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了， 这就是字体图标（iconfont).
import Vue from ‘vue’; import MuseUI from ‘muse-ui’; import ‘muse-ui/dist/muse-ui.css’;
这可能是目前最便捷、最合适的 Icon 使用方式了，特别是在 Vue3 中，等等，你以为它只是适用于 Vue3？不，不要被标题欺骗，它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架，同样，它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的，示例代码也是基于此。
上一篇 《Flutter 知识集锦 | Dart 开发命令行工具》 介绍了，如何通过 Dart 开发一个命令行脚本工具。本篇将结合一个具体的场景，介绍一下它的使用。toly 命令行工具目前已经开源并上传到 pub :
使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn 提供的便利，大多情况下，我们不必上传自己的图标，只需要便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。
http://www.cnblogs.com/jikey/p/3631292.html
每一个应用程序，其实都会有分享的需求，比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台，因为人类是社交动物，而社交分享能够满足马斯洛需求金字塔情感和归属的需求以及受尊重的需求。另外网页的社交分享功能不仅可以满足阅读者，同时，对于网络应用本身，也可以相应的增加该网站的外部链接，比如微博豆瓣等线上粘性用户非常多的社交平台，如果是twitter或者facebook则可以带来一部分来自于国外的流量，对于网络平台来说，这样做即可以分发流量又可以引流导流，一箭双雕，一举而多得。
本次的系列博文的知识点讲解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可
图标虽小，里面的门道可一点都不少。甚至可以说，图标的演化是 Web 技术演化的一个缩影。本文将带你回顾一下图标简史，了解一下图标技术的来龙去脉。
先来简单的介绍一下字体图标。字体图标是近两年才流行起来的技术，主要是因为 CSS3 增加了一个非常实用的属性 @font-face。传统的网页中的字体设置，使用 font-family 属性来定义，而且受限于浏览者电脑上所安装的字体，如果浏览者电脑上没有安装对应字体，那么网页渲染起来就会使用其他字体来代替。
Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。
字体：实际上是长得像图标的字体，占用的空间小，消耗的带宽小，能够更快的显示页面。字体是矢量的，所以不会失真，可以按照字体一样设置字体颜色和大小。
但是如果使用普通的按钮或者图片来制作分享按钮未免太过单调，这里推荐使用iconfront，那么iconfront是什么呢？它的学名叫做字体图标，是一种介于字体和图片之间的东西，它集成了字体和图片各自的优势，同时又降低了各自的劣势，我们知道几年之前awsomefont大行于世，备受追捧，但是它过大的体积另小型网站望而却步，而图片的问题在于，不论是压缩后的图片，还是雪碧图，终归还是图片，只要是图片，就还是会占用大量网络传输资源。但是字体图标的出现，却让前端开发者看到了另外一个神奇的世界，iconfront矢量图标则可缩放至你想要的任意尺寸而不心担心失真、与文字一样的处理方式，方便调整颜色与大小等。
字体图标 指的是 将图标做成字体样式 , 在 放图标的地方 使用 文字 即可实现 图标显示 ;
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
