icon fonts

iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/   https://icomoon.io/

最近的项目使用了图标库,使我对小小的图标有了更深一步的认识。刚开始项目使用了fontawesome图标库,但由于很多跟UI设计的独特图标不一致,最终决定做一个本项目的专用图标库。一段时间内两个图标库会共存,以后逐步替换成自己的图标库。

在阿里iconfont上传ui的svg图建立了该项目的图标专用库。这个还是蛮好用的。http://www.iconfont.cn(推荐)

它可以上传自己的图标,可以收藏,可以建立项目,添加项目小组成员。

它有三种使用方法:

1.unicode码

复制生成的代码:@font-face {font-family: ‘iconfontyyy‘; src: url(‘iconfont.eot‘); src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), url(‘iconfont.woff‘) format(‘woff‘), url(‘iconfont.ttf‘) format(‘truetype‘), url(‘iconfont.svg#iconfontyyy‘) format(‘svg‘); }

自定义样式class名:.iconfontyyy{ font-family:"iconfontyyy" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

页面结构:<i class="iconfontyyy">3</i>

2.font-class

编辑之后样式自动生成:例如http://at.alicdn.com/t/font_9cd26v04g9pgy14i.css 注意,每次更新图标的样式后路径都要重新替换一次,因为每次的修改生成的样式的名字都是不一样的

使用:a.复制并引入该css样式链接,b.页面结构:<i class="iconfontyyy icon-xxx"></i>, 加上该图标的class名

3.symbol(svg图,支持不同颜色,仅支持ie9+,渲染svg性能比png稍差)

编辑之后js自动生成:例如http://at.alicdn.com/t/font_1473319176_4914331.js注意,每次更新图标的后路径都要重新替换一次

使用:a.复制并引入该js链接

b.通用的css代码:例如.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

c.页面结构:<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

时间: 2024-10-22 17:28:07

icon fonts的相关文章

响应式Web图形篇 —— icon fonts 的探析及应用

前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重构灵活性是前端工程师们关心的主题. 当下互联网设备「风起云涌」,显示分辨率「层出不穷」,为 Web 创建者们带来越来越多的难题. 需要为高PPI(aka Retina)显示设备准备@1.5x.@2x.@3x的图片素材: 需要针对不同显示屏分辨率来调整优化排版: 需要考虑多个分辨率版本的图片的加载性能

IcoMoon 图标字体 Custom built and crisp icon fonts, done right

What is IcoMoon? IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and hosting icons as SVGs or fonts. Read further to learn about each service in detail. https://icomoon.io/app/#/select https://icomoon.i

在网页中画Icon小图标

在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置.优点:减少文本体积和服务器请求次数,从而提高效率. 知识点:background-image background-position(向下向右取的是负值). 特点:1,相对单个图标,节省文本体积和服务器请求次数

icon小图标

在网页中插入icon图标的方法总结 CSS Sprite font + HTML font + CSS 其中不太明白的是\f309这一段css表示:在节点#twitter前面,插入一段内容("\f309").这个内容("\f309")是一个字符,f309是这个字符的16进制unicode编码.不理解可以把 "\f309" 改成 "\6211" ,然后查看效果.事实上 content:"我" 和 conten

带你优雅的使用 icon

前言 本篇文章其实陆陆续续写了快半年,主体部分写好了很久了,但由于种种原因一直没有发布.首先来说说写这篇文章的主要初衷是:在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还好,但随着项目的不断迭代,每次修改添加图标会变得很麻烦,而且总觉得不够优雅,就开始琢磨着有啥简单方便的工作流呢? 演进史 首先我们来说一下前端 icon 的发展史. 远古时代在我刚开始实习时,大部分图标都是用 img 来实现的.渐渐发现一个页面的请求资源中图片 img 占了大部分,所以为了优化有了image spr

Expo大作战(十一)--expo中的预加载和缓存资产(Preloading &amp; Caching Assets),expo中的图标 (Icon)

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xd

精选!15 个必备的 VSCode 插件(前端类)

精选!15 个必备的 VSCode 插件(前端类) 15 天前 ? Plugins, Web前端 ? 暂无评论 Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件.为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些实用.有趣的插件与大家分享. 1. Open-In-Browser 由于 VSCode 没有提供直

PNG格式小图标的CSS任意颜色赋色技术

一.眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选择一个颜色,例如紫色,然后: 是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了. SVG, icon fonts等技术似乎也不是那么耀眼了. 二.原理其实很简单 原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,drop-shadow滤镜可以给元素或图片非透明区域添

《转》PNG格式小图标的CSS任意颜色赋色技术

转自张鑫旭的PNG格式小图标的CSS任意颜色赋色技术 一.眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选择一个颜色,例如紫色,然后: 是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了. SVG, icon fonts等技术似乎也不是那么耀眼了. 二.原理其实很简单 原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,