字体图标iconfont的使用

什么是iconfont

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

所以作为一名合格的前端程序员，一定要熟练使用iconfont

为什么要使用iconfont

简单点来说根据以往开发项目的经验，通常是下载img图片，并且直接插入到html中，说实话这个方法比较简单粗暴。但是却有很大的缺点。就是需要浏览器加载资源，降低浏览器性能。所以我找了一篇写的比较好的文章，是关于前端图片的处理技术，可以参考参考
兼容性好，应用广，广泛使用，但是由于字体的颜色设置单一，对于色彩复杂的图片，不能很好地进行处理。

如何使用iconfont

在搜索框汇总搜索关键字后，我们就可以找到类似的图案样式，如下图所示。
一般来说我们点击之后，就可以设置图标的颜色和大小，并且可以下载png或者svg的格式，至于这两种格式的区别。如下文章所示
当然我发现了一些比较好玩的方法，我们可以将图标添加到自己的项目中，如下图所示

然后我们就可以在自己的个人页面找到自己的项目，我们可以选择将相关代码下载到本地，或者直接复制代码到项目中。接下来我来具体讲讲怎么使用把！
我们把download.zip文件解压后，会得到如图所示的文件目录。我们可以打开
demo_index.html查看自己想要的图标的样式，而且会告诉你如何使用，需要注意在联网的状态下使用。我们有三种使用方式，unicode font-class和symbol当然用的最多的就是font-class 因为我们对类名太熟练不过了，所以第一反应就是使用font-class，其余两种引入方式读者自行查阅。

其中的icon-xxx就是自己想要引入的具体图标，比如我想引入一个爱心，图标简介如下

那么我就需要把类名设置为

 <i class="iconfont icon-favorites-fill"></i>

相信通过简单的示范，你们都应该知道字体图标的基本用法啦。当然别忘记引入css文件哟。

使用iconfont的心得体会

以前做项目把，放了很多图片在同一个文件夹下，然后有许多乱七八糟的命名，其实到最后我也不能准确的根据图片名说出图片表示的是什么，这种开发习惯不利于后期项目代码的调试和优化。所以我们得从开始养成良好的习惯，我们也不能一昧使用别人下载好的download.zip文件，自己一定要知道怎么使用！孰能生巧。
再者iconfont是一个最基本最全能的一个字体图标库，虽然很多组件库，自己可以提供很多小图标，比如vue的移动vant组件库，但是说实话，那个组件库只是有部分字体图标，iconfont是一个面向所有开发者的一个平台，我们可以自己上传图标供自己使用，所以前端爱好者们，冲压！相信明天会更美好。

字体图标iconfont的使用相关推荐

WPF自定义控件与样式(1)-矢量字体图标(iconfont)
原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一．图标字体图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序 ...
安卓开发使用ttf文字_Android中正确使用字体图标(iconfont)的方法
字体图标字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
手把手教你字体图标iconfont如何使用
页面(PC/移动都支持)布局字体图标iconfont的使用背景:随着用户体验度的提升,现在一些功能性的小图标应用而生,最开始这些图标是图片,然而图片面临可编辑性差,占用内存大的问题.字体图标应用而生 ...
只需1步，图片转换成字体图标iconfont
只需1步,图片转换成字体图标iconfont 做项目时,需要一些字体图标,于是找到了下面的网址,好的东西当然要分享出来啦 http://www.ico51.cn/ 我是使用在了title里 <l ...
react使用字体图标iconfont
react使用字体图标iconfont 第一步,进入到iconfont官网,选择图标管理进入我的项目,点击右上角的+号创建自己的项目: 创建完项目后可以去搜索自己想要的的图标,然后点击添加至购物车: ...
vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
字体图标使用教程阿里字体图标iconfont 鲸鱼编程
官方网址 iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/ 注册并登陆寻找自己喜欢的图标添加首次使用新建一个项目生成代码需要点一下生成后的结果使用字 ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...

字体图标iconfont的使用

什么是iconfont

为什么要使用iconfont

如何使用iconfont

使用iconfont的心得体会

字体图标iconfont的使用相关推荐

最新文章

热门文章