icomoon

1. 概念 这个小红点是图标， 图标在CSS中实际上是字体。 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小。 2.2 图片增加了额外的http请求，大大降低网页的性能。 2.3 图片不能很多地进行缩放，因为图片放大和缩小会失真。 3. 字体图标的优点，结合图片和文字的特性 3.1 可以做出跟图片一样可以做的事情,改变透明度、旋转度等等 3.2 本质是文字，可以很随意的改变颜色、产生阴影、透明效果等等 3.3 体积更小，可携带的信息没有削减 3.4 几乎支持所有浏览器 3.5 对移动端设备友好 4. 字体图标使用流程 网站看bookmarks，美工 --> 图标 5. 字体引入到HTML 以https://icomoon.io/#home为例 点击右上角的IcoMoon App 将下载来的压缩包中的fonts文件夹放进我们的项目中 在html中声明字体 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url(

字体图标库http://icomoon.io 一.字体图标的下载 Icomoon字库：http://icomoon.io 阿里Icomoon字库：http://www.icomoon.cn 下载完成并解压之后的目录： 下载完成之后的文件夹注意都不能删！ 二.字体图标的引用 1.把下载包里的fonts文件夹放到页面根目录下（javaWeb项目可以放到WebContent下） 2.在css样式中全局声明字体：简单理解为把字体文件通过css文件引入到页面中， 一定注意字体路径问题！！ //style.css的前11行代码@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?pvze7i'); src: url('fonts/icomoon.eot?pvze7i#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?pvze7i') format('truetype'), url('fonts/icomoon.woff?pvze7i') format('woff'), url('fonts/icomoon.svg?pvze7i#icomoon') format('svg'); font-weight: normal; font-style:

@font-face制作Web Icon @font-face规则在css2中已经存在，但在css2.1中被删除，在css3中又重新被引入。自从Metro 风格被大多前段程序员青睐后，使用@font-face制作web icon 已经广泛使用于网页设计 下面例子是制作Metro风格按钮 1.在网站 http://icomoon.io/app/ 上下载所需的图标 压缩包中包含有相应的例子 2.把fonts文件夹添加都你的网页文件中， 在css文件中初始化字体样式 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } 3.引用字体样式 [data-icon]:before { font-family: 'icomoon';

1-2.打开 IcoMoon 载入下载好svg图标（如图所示） 3选择选择工具 4.点击成为白色-即为选中状态 5.生成图标文字 6点击下载文件 7.需要使用的文件 fonts文件和style.css 8.编辑html文档 给span标签加上css样式里面的class（icon-uniE900）引入css样式 9style.css 和载入字体一样在样式里添加文字的大小颜色但是字体必须是font-family: ‘icomoon’; 当然IcoMoon 里面也有现成的图标，可以直接使用：仅供参考！ 来源： CSDN 作者： 张得武 链接： https://blog.csdn.net/zhangfan5211314/article/details/103627850

此篇博文讲述如何利用icomoon导入图标，从而把自己想要的都通过icomoon方式进行，大家都知道，网站以及移动端，用图标还是尽量选择这种。因为直接用image有些图标会失真，从而也是前端开发之中，需求去掌握的一项，很简单的就几个步骤。 一，icomoon官网链接： https://icomoon.io/app/#/select 进入官网，默认会生成一套图标文件，如果不需要可以将所有的文件进行删除。具体操作如下图所示。 为橙色的是已选择的图标； 灰色的状态是未选择的； 右边紫色的开关按钮，可以开或关掉此列表； 左上角可以创建列表，自定义的相关文件，或者导入文件； impout icons按钮为导入自己想要的SVG格式图。 会员用户可以通过账号存储图标的信息； 非会员用户只能通过浏览器的在本地存储相应的图标信息，因此普通用户尽量在同一个浏览器上面去编辑图标库，有需要的情况下将所有的svg图标进行导出备份，这样每次就不会失去以前导入好的图标了。 二：导入图标文件 选择自己做好的SVG格式的图标，会自动导入到下方列表中，如果没有SVG格式的图标，可以进入阿里图库下载： http://www.iconfont.cn/ 三：选中修改按钮，点击任意图标，弹出信息修改框。 四：导入创建新列表，以及退出，如下： 五：如果自己没有制作好的图标，也可以用官网提供的图标，也是很不错的，有些需要缴纳费用

下载字体图标的两个网站; 国产的： 阿里iconfont字库 推荐网站： icomoon字库 那么如何去下载使用呢？ 首先点击下图进行页面的跳转，由于是外国的网站可能有点慢哦： 点击后跳转的页面： 当选择下图图标，点击编辑图标时： 点击上图下载按钮进行，显示出页面： 下载完成得到该压缩包; 解压该压缩包; 该文件夹不能进行任意的删除 将fonts文件夹放入项目中; 在谷歌浏览器中进行打开解压出文件夹中的;demo.html 打开该页面建议使用谷歌浏览器进行打开： 显示打开的页面： 接下来就进行开始使用; 进行书写其样式： 声明字体图标： 1 <style> 2 @font-face { 3 4 /* 字体图标 */ 5 /* 1.这个字体的名称需要注意 */ 6 font-family: 'icomoon'; 7 /* 2. 一定要注意字体的路径问题 */ 8 src: url('fonts/icomoon.eot?7kkyc2'); 9 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), 10 url('fonts/icomoon.ttf?7kkyc2') format('truetype'), 11 url('fonts/icomoon.woff?7kkyc2') format(

一、这是篇经验分享 就算不是果粉也应该知道，iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”，其 设备分辨比 （之前有详细介绍， 点击这里 查看）是iPad2的两倍。 – iPad mini也是普通分辨比。 iPad2与new iPad同时显示一个页面，宽度都是1024像素的，那差别在什么地方呢？——就在于new iPad每个像素点实际上有4倍的普通像素点，如下示意(© smashingmagazine)： 我们使用CSS设置的像素值(px)属于普通像素点，或者称之为标准像素点。 因此，一张200×200尺寸的图片，我们设置如下CSS: img { width: 200px; height: 200px; } 在iPad2或Mini iPad中就是很正常显示的图片；但是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色 近似选取 ，于是，图片感觉就是模糊的(© smashingmagazine)！ 因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是： img { width: 200px; height: 200px; } 此时，视网膜屏幕下图片就显示OK了

　字体图标的作用： 1. 可以做出图片一样可以做的事情， 改变透明度， 旋转度，等... 2. 但是本质其实是文字，可以很随意的改变颜色， 产生阴影，透明效果等 3. 本身体积更小，但携带的信息并没有消减 4. 几乎支持所有的浏览器 5. 移动端设备必备良药 字体图标使用流程： 1. UI人员设计好字体图标效果图 （svg） 使用软件 illustrator 或sketch 2. 前端人员上传生成兼容性字体文件包 https://icomoon.io/ iconfont.cn 3. 前端人员下载兼容字体文件包到本地 4. 把字体文件包引入到HTML页面中 应用： 第一步.在css里面声明字体 @font-face { /* 电脑中没有的字体，我们需要声明 */ font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2

字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。 这就是字体图标（iconfont). 字体图标优点 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药... 字体图标使用流程 总体来说，字体图标按照如下流程： 设计字体图标 假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图： 之后保存为svg格式，然后给我们前端人员就好了。 其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。 上传生成字体包 当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。 推荐网站：

项目的结构如下： 项目资源准备 准备项目的各种图片资源等等 注意：在webpack 可以不用 css sprite ，直接用单张图片，因为它会帮忙打包。 还有 SVG 图片，放大之后不会影响质量，在移动端开发中，通常会把色彩单一的图片做成 SVG 图片。这些不是直接用，利用一些工具去把这些 SVG 图片去转化成一个叫图标字体的文件，就可以在 CSS 引用了。 图标字体制作 在项目开发前期，我们需要将设计师给的一些图片制作成字体图标 用一个叫 IcoMoon 的工具（ https://icomoon.io/ ），它本身有的图标可以查看 IcoMoon App ，要用自定义图标的话可以在 IcoMoon App 里面点击 Import Icons ，将所有的 SVG 图片导入，就可以下载使用了。（里面的 Get Code 可以查看使用方法 ）。 在下载之前可以点击左上角的preferences ，设置一下名称：sell-icon 项目目录设计 所有代码都在 src 文件目录下 入口文件 main.js ； 整个页面的 vue 实例文件 App.vue ； components ：存放我们的组件文件，但我们不会像 hello.vue 一样直接放在里面，我们会多件一个子目录，像这样： 这样做是因为一个vue 组件除了它的 .vue 文件以外，还可能包含一个图片相关资源等等。之前说过