前端框架增加自定义fontIcons的方法
来源:互联网 发布:windows xp桌面主题 编辑:程序博客网 时间:2024/05/15 23:49
在这里主要介绍的是阿里巴巴的矢量图标管理网站(Iconfont.cn),它也是国内首家推广Webfont形式图标的平台。Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。在这里分三点进行说明。
一、图标制作制作
设计师同学可以根据官方提供的设计规范进行制作,工具是AI,制作完成导出的时候需要另存为SVG格式。
制作完成就需要进行下一步上传操作。
二、个人图标管理
Iconfont.cn支持设计自己上传图标、收藏图标以及管理项目图标。
1、上传图标
在iconfont.cn平台的导航上有一个 上传图标 入口,点击该入口进入上传流程,选择您要上传的SVG格式图标。
由于图标存在iconfont.cn平台上搜索需要通过关键词和tag才能查询到图标,所以在上传图标的时候需要命名图标的名字和定义图标的tag。
2、管理图标
打开首页导航的‘图标管理’按钮,进入图标管理界面,以供查看“我上传的图标”、“我收藏的图标”、“项目管理图标”、“我的公开图标库”等分类。
用户可以在这里上传删除图标,收藏图标,进行图标的分类管理。图标分类管理是为了在实际项目中应用,这也是这篇博客的重点。
三、图标应用
fontIcons对于前端应用来说有很多便捷:
- 只有变化大小;
- 自由改变颜色;
- 可以添加一些视觉效果,如阴影、旋转、透明度等等css3效果;
- 兼容IE6。
下面介绍图标应用的步骤:
1、搜索图标
搜索找到自己需要的图标,点击会进入右上角的购物车中(可多选),见下图
2、项目管理
点击存储为项目,输入项目名称,如”mui-icon-add”,点击存储后,会跳转到项目管理页面.
3、下载字体
点击下载到本地,会将合并后的字体文件和自动生成的css文件全部下载到本地.
4、修改css
默认的如下:
@font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}.icon-nanzhuang:before { content: "\e600"; }.icon-nvzhuang:before { content: "\e601"; }.icon-gouwuche:before { content: "\e602"; }
我们可稍作修改,
- 为保证和框架目录结构统一,建议将字体文件放在fonts目录下,这样我们需要修改@font-face下得url属性;
- 字体文件类名需要和其他字体文件保持一致,方便调用。
- 只兼容iOS和Android版本的话,我们仅需要ttf格式的字体即可,其它字体可以删除;同时,我们也仅需保留-webkit前缀语法,-moz前缀部分可以删除;
修改后的代码如下:
@font-face {font-family: "iconfont"; src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; } .icon-nanzhuang:before { content: "\e600"; } .icon-nvzhuang:before { content: "\e601"; } .icon-gouwuche:before { content: "\e602"; }
将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下,然后即可在框架中引用刚生成的字体图.
以mui框架为例,新增的字体应用在标签内代码如下:
<span class="mui-icon iconfont icon-nanzhuang"></span>
以上完!
- 前端框架增加自定义fontIcons的方法
- jQuery增加自定义函数的方法
- web前端自定义属性的方法
- 给django增加bootstrap前端框架
- java 自定义mvc框架(一)------前端控制器的实现
- 给jquery的validate插件增加自定义方法
- Laravel框架5.*自定义常量的方法
- 使用腾讯前端Jx框架写自己的方法
- 前端流行的框架
- 常用的前端框架
- 前端框架的选择
- 前端框架的思考
- 前端框架的分级
- 丰富的前端框架
- 优秀的前端框架
- 自定义对象的属性增加
- 增加记录的方法
- 增加积分的方法
- iOS 自定义Tabbar 改变点击背景颜色
- Java常用开发工具介绍
- Android 属性动画理解
- 我的博客
- angular好用的插件集合(持续更新中)
- 前端框架增加自定义fontIcons的方法
- 连续子数组的最大和
- Three.js 学习记录 之 纹理加载
- jquery点击table表头排序
- 润乾报表的集算报表V5.0集成到WEB项目
- UVA 11468 Substring(AC自动机+树上的动态规划)
- 发起一个微信支付请求接口— wx.chooseWXPay() – 微信JS开发文档
- Minecraft 编程 学习笔记
- Maven项目文件路径问题