博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
icon fonts入门
阅读量:5036 次
发布时间:2019-06-12

本文共 1441 字,大约阅读时间需要 4 分钟。

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">&#x33;</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>

 

转载于:https://www.cnblogs.com/alice-fee/p/6106635.html

你可能感兴趣的文章
Visio 入门教程
查看>>
VxLAN
查看>>
mysql-5.7.17的最新安装教程
查看>>
mysql 如何实现跨裤查询
查看>>
深度工作:充分使用每一份脑力
查看>>
redis的string类型操作命令
查看>>
一步一步学Linq to sql(一):预备知识
查看>>
全排列(传统&&黑科技)
查看>>
plist文件
查看>>
SSM Maven MallDemo项目为例
查看>>
NopCommerce 1.9 2.0 2.1 设置连接字符串
查看>>
当form表单中只有一个input时按回车键将会自动将表单提交
查看>>
题目:返回一个整数数组中最大子数组的和。
查看>>
写出float x 与“零值”比较的if语句——一道面试题分析
查看>>
任务06——封装与单元测试
查看>>
VSTO学习笔记(十四)Excel数据透视表与PowerPivot
查看>>
Xamarin.Android 的 Google 登入
查看>>
HashMap与HashTable的区别
查看>>
从jvm的角度来看java的多线程
查看>>
微服务实战(四):微服务化之无状态化与容器化
查看>>