下载文档原格式
reactjs项⽬使⽤iconfont⼩图标以及使⽤带颜⾊inconfont⼩图标在 reactjs 项⽬中是所有⼩图标⽬前主要分为两类使⽤⽅式，第⼀类通过 CSS 引⼊的⽅式使⽤，第⼆类使⽤ JS 的⽅式引⼊使⽤。
1. 注册-登录-建⽴项⽬-选中图标添加到购物车-添加⾄项⽬-下载到本地，当然亦能上传制作的⾃定义⼩图标。
下⾯正式代码部分。
下载到本地解压后有如下⼏个⽂件：其中第⼀种 CSS 引⼊使⽤的⽅案需要使⽤的⽂件如下图红线标记：在如上图中找到 iconfont.css 打开后更改路径(⼀般如图中所⽰)在红线标记的位置:修改完成后保存，⼀般会项⽬⼊⼝的 CSS ⽂件中引⼊这个 CSS ⽂件，依照⾃⼰的⽂件路径(例⼦⾥放在 static ⽬录下，注意末尾有分号)：@import './static/iconfont/iconfont.css';之后则在页⾯中直接书写：<span class="iconfont">3</span>第⼆种⽅式本质也是 CSS 的，不过其概念不同，需要安装第三⽅插件 styled-components前三步都相同，第四步则把 iconfont.css 改成 iconfont.js第五步在改名后的 iconfont.js ⽂件顶部引⼊ styled-components 导出变量具体的代码如下：import { createGlobalStyle } from 'styled-components'export const Icon = createGlobalStyle `@font-face {font-family: "iconfont";src: url('./iconfont.eot?t=1561821154036'); /* IE9 */src: url('./iconfont.eot?t=1561821154036#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQQAAsAAAAACGgAAAPDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqEBINWATYCJAMUCwwABCAFhG0HShtkBxEVnOvIfhS4sTOsrGf+U2g2U url('./iconfont.woff?t=1561821154036') format('woff'),url('./iconfont.ttf?t=1561821154036') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('./iconfont.svg?t=1561821154036#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}`最后则在⼊⼝ js 中引⼊改名的 iconfont.js (注意⽂件路径)。
icon设计过程中需要注意的事项批评别人的作品比自己制作一个优秀的作品要容易得多。
但如果你使用一个有系统的方式去批评，列出项目清单并准备好插图，它就会被认为是个成熟的分析！在我看来，图标设计正经历着一个过渡阶段。
一方面，屏幕分辨率在增长，因此要提高图标品质。
另一方面，我们仍拥有好的旧款图素。
16X16乃至于更小的图标仍在被广泛使用。
所以，这里为大家介绍一下在图标设计中很容易被观察到的错误。
1.图标间差异不充分有时，在一套图标中，我们的一些图标看起来很像，这让人很难分辨出哪个是哪个。
如果你不注意说明，你会很容易把这些图标混在一起。
MacOS．．．．． X中的图标。
我经常把他们搞混以致选错程序。
问题在显示小图标时变得更严重。
2.图标中元素过多图标越简单、简洁，就越好。
把一个图标中的元素控制到尽可能少的数量是很可取的。
然而，微软的设计师们，受到windows vista新的图标设计特征的启示，决定设计巨大、肿胀的图标来证明他们拥有庞大的预算。
每个图标用复杂的构图给我们展现出微小的信息，问题在于在使用小图标时你无法搞清它在描述什么。
甚至使用在大图标时，有时也不是那么容易搞清图标的含义。
3.不必要的元素。
图标应该被轻松识读。
图标元素越少越好。
最好让整个图像具有相关性，而不是只是一部分。
因此，你必须注意使用这些图标的环境。
让我们看看数据库中图标的例子：一眼扫过，没什么问题。
但是如果这个应用程序（或者独立工具栏）仅仅与数据库有关，你可以（也理应）去掉不必要的部分。
含义没有丢失，可是图标更好辨识了。
这是个BeOS5图标中使用不必要元素的鲜活例子。
这里的对号绝对多余，另外，它们为什么是红色的？4.一套图标的风格缺乏一致性图标风格上的一致使得多个图标称为一套。
一致性可以是以下的任何一种。
色彩设计、透视、大小、绘画技巧或以上多种的结合。
如果一套中只有一些图标，那么设计者可以把一些规则记在脑中。
可是如果一套中有许多图标，或者有好几个设计者在绘制（比如制作操作系统的图标），那么就要制定一些特别的规则。
cool editor学用IconCoolEditor设计酷炫图标我们经常可以看到许多非常可爱的图标若想要自己来做一套好用功能强的图标软件当然不可少。
IconCool Editor就是一套非常不错的绘制图标工具软件具有相当完整的功能可以做出各种规格且漂亮的图标。
IconCool Editor软件的问世为我们自行打造图标提供了一个优秀的创作平台下面我们就来为大家介绍如何使用IconCool Editor制作自己的酷炫图标。
一、软件介绍IconCool Editor是一个Icon编辑的工具软件它可让你同时编辑10个Icon在使用上也相当容易具有21个图形滤镜可供你使用如模糊、尖锐、浮雕花纹等等。
它还提供了13个影像处理效果并具有影像提取的功能也可以改变色彩由单色到32位真彩色。
这些都是一般绘图软件才有的功能可以让使用者充分发挥自己的创意。
而其它的功能也相当多像是捕捉图形、撤消/重做、支持鼠标右键弹出菜单等等。
如果你想做漂亮的图标别忘记试试IconCool Editor相信对它众多的功能你一定会满意。
点击下载IconCool Editor软件的安装过程比较简单在安装向导的指引下便可顺利安装完毕进入IconCool Editor后完整且丰富的主界面便呈现在眼前软件的上方为工具栏下方为颜色搭配的调色板软件将一些常用工具集成在主界面的左侧使用起来较为方便右侧则为图标大小及颜色深度的设置栏如图1。
图1 二、实战教学该软件提供了多种制作方案供用户来选择。
下面笔者将把各种制作方式的流程介绍给大家。
1、原创制作既然是原创那么整个过程就要全部由我们自己动手完成。
首先我们要新建一个图标模版。
点击文件→新建。
大小选择32x32象素颜色选择256色8位选择完毕后点击确定结束。
当然如果您想选择别的大小和色位也是可以的区别在于制作出来的精细度不同如图2。
图2 创建好新的模版后我们就可以在这个基台上面随便绘制了。
选择快捷工具栏中的画笔工具进行绘制如图3。
icon使用方法Icon使用方法在现代的数字化时代，我们经常会在各种应用程序、网站和移动设备上看到各种各样的图标（Icon）。
这些图标不仅能够美化界面，还能够传达信息和功能。
本文将介绍一些常见的Icon使用方法，帮助读者更好地理解和应用这些图标。
一、Icon的作用和分类Icon作为一种图形符号，具有简洁明了、易于识别和传达信息的特点。
它可以代表特定的功能、操作或内容，为用户提供直观的视觉引导和操作体验。
根据其功能和用途的不同，Icon可以分为以下几类：1. 功能性Icon：用于表示特定的功能或操作，例如“打印”、“保存”、“删除”等。
这类Icon通常具有明确的含义和标识，能够快速传达相关的操作意图。
2. 内容性Icon：用于表示特定的内容或信息，例如“音乐”、“电影”、“新闻”等。
这类Icon通常通过图形或符号来表达，能够直观地反映其所代表的内容。
3. 导航性Icon：用于表示网页或应用程序的导航菜单、标签等，例如“主页”、“设置”、“搜索”等。
这类Icon通常具有较为统一的样式和布局，帮助用户更好地了解网页或应用程序的结构和功能。
二、Icon的设计原则为了确保Icon的使用效果和用户体验，设计师需要遵循一些基本的设计原则。
以下是一些常见的Icon设计原则：1. 简洁明了：Icon应该尽量简洁明了，避免过多的细节和复杂的图案。
简洁的Icon更容易被用户理解和识别，提高用户的操作效率和满意度。
2. 一致性：Icon在整个应用程序或网站中应保持一致的样式和风格。
一致的Icon能够让用户更好地理解和识别其所代表的功能或内容，提高用户的使用体验。
3. 可视性：Icon应该具有良好的可视性，即在各种不同的背景和分辨率下都能够清晰可见。
设计师应该考虑到不同设备和平台的适应性，确保Icon在各种环境下都能够保持良好的显示效果。
4. 目标导向：Icon的设计应该与其所代表的功能或内容密切相关，能够直观地反映其功能和用途。
1.my computer 我的电脑2.e-mail 邮件3.desktop 桌面4.recycle bin(empty) 回收站5.recycle bin(full) 回收站满6.closed folder 关闭文件夹7.open folder 打开文件夹8.workgroup 工作组work drive(offline) 网络驱动器（脱机）work drive(connected) 网络驱动器（连接）11.help and support （系统的帮助与支持中心）12.fonts（字体）13.volume（音量）14.taskbar and start menu（任务栏和开始菜单）15.administrative tools（系统管理工具）16.scanners&cameras（扫描器和摄影机）17.hard drive（硬盘驱动器）18.removable drive（可移动驱动器）19.ram drive（内存驱动）20.floppy drive3（1/2）（软盘驱动器）21.my videos（我的视频）22.shared videos（分享影片）23.internet explorer（因特网浏览器）24.internet document25.activeX cache（Active 缓存）26.my pictures（图片收藏）27.shared pictures（共享图片）28.my music（我的音乐）29.shared music（共享音乐）30.run（运行）31.help file（帮助文件）32.write document（编写文档）33.text document（文本文件）34.rich text document（多格式文本）35.my documents（我的文档）36.png Image（PNG格式图片）37.jpeg image（JPEG格式图片）38.bitmap image（位图图像）39.gif image（GIF格式图片）40.favorites（收藏夹）41.audio CD（音频光盘）42.CD-ROW drive（光盘驱动）43.Movie clip（影片剪辑）44.search（搜索）45.my network places（网上邻居）46.printers and faxes（打印机和传真机）47.subscriptions（订阅）48.folder options（文件夹选项）49.url history（历史记录）50.mouse（鼠标）51.shortcut overlay（快捷方式的箭头）52.sharing overlay（共享图标）53.set program access and…（设置程序存取和…）54.scheduled Tasks（计划任务）55.program group（程序组）56.photos（相册）work Service(网络服务)58.My Recent Document(最近的文档)59.Default Icon(系统默认图标)60.Settings(设置)。
什么是ico图标
很多人都不明白什么是ico图标，今天我在这里跟大家解释一下什么是ico图标。
ico图标其实是icon file的缩写形式，它是基于windows而开发的一个图形格式，大多用于windows 桌面图标的显示，下面是一些大家熟悉的ico图标表现形式，想必大家看完以后会对什么ico 图标有一个初步的印象了。
Windows中的Ico图标大全
以上ico图标大家应该多多少少都是看过的，很多应该是相当熟悉才对，如‘qq会员标志’，‘wmv播放器’等。
所以我们更可以用一句话来概括一下什么是icon图标：一般所说的ico图标是作为浏览器首段图标显示，还可以在收藏夹内收藏内容的前段显示小图标。
最后为大家分享一些常用的icon图标
播放器Ico图标形式
网页icon图标
更多的icon图标，大家可以访问/aicdr/109_573.aspx
本文由素材网收集整理发布。
为什么⼤家都⽤i标签ii⽤作⼩图标？1. ⽤ <i> 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；2. <i> ⽐ <span> 短，但 gzip 后差异很⼩，不过打字可以少按三个键；3. 多数图标⽤的是空 <i> 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。
综合来看，从实⽤性上暂时没看出有什么缺陷，所以⽬前⽤不⽤ <i> 取决于你对于遵循规范有多洁癖。
基本语法:before 和 :after 伪元素编码⾮常简单(和⼤多数的css属性⼀样不需要⼀⼤堆的前缀)。
这⾥是⼀个简单的例⼦。
#example:before {content: "#";}#example:after {content: ".";}这个例⼦中提到了两件事情，第⼀，我们⽤#example:before和#example:after来⽬标锁定相同的元素.严格的说，在代码中他们是伪元素。
第⼆，在中提到，伪元素如果没有设置“content”属性，伪元素是⽆⽤的。
在这个例⼦中，拥有属性id的元素将有⼀个"哈希符号"放置内容之前，和⼀个"句号"在内容之后。
语法笔记你可以设置content属性值为空，并且仅仅把他当做⼀个内容很少的盒⼦。
像这样:#example:before {content:"";display: block;width: 100px;height: 100px;}然⽽，你不可以完全的移除content属性，如果你移除了，伪元素将不会起作⽤。
⾄少，content属性需要空引⽤作为它的值(即:content:“”)。
你也许注意到，你也可以⽤两个冒号(::before 和 ::after) 写伪元素，这个我过的。
