官方公告

官方公告

最新动态,版本发布
开发讨论

开发讨论

与前端大神一起探索
技术分享

技术分享

你的开发加油站
问题反馈

问题反馈

非常抱歉,AUI会有一些bug,感谢反馈给我们

AUI中关于如何扩展和修改图标

技术分享流浪男 发表了文章 • 9 个评论 • 1760 次浏览 • 2016-04-17 22:16 • 来自相关话题

在1.2.0中,AUI将图标样式分离了出来,方便开发者进行修改。ttf字体图标的替换和修改我们可以借助一些字体编辑软件来操作BirdFont(这个也是我一直在用的),也可以另外建立ttf文件进行扩展。下面说一下如果进行扩展:
我们可以从阿里图标库 http://www.iconfont.cn/  中选择图标,并打包下载,解压后看到以下文件:





在里面我们用到有iconfont.css、iconfont.ttf,如果想使用svg的话可以一并引入。
把上面两个文件放到css文件夹中,做简单的修改,避免冲突我们需要将font-family重新命名,和删掉没用的字体文件@font-face {font-family: "自定义字体名称";
src: url('mami-iconfont.ttf') format('truetype');
}

.iconfont {
font-family:"自定义字体名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}其他的可以保持不变,修改完成后保存,页面使用时使用时将css文件引入,然后就可以直接<i class="iconfont icon-*"></i>来调用了。
 
下面介绍下BirdFont编辑ttf文件,编辑ttf文件时需要有一定的矢量图绘制基础,以mac的BirdFont为例:
第一步





 
 
第二步
点击指向按钮,选择要编辑的ttf文件





 
第三步,双击箭头指向方向





 
我们可以看到全部的图标了,双击一个图标进入编辑
 





 
左侧为工具栏,右侧为视图,我们可以直接用此软件编辑,也可以从外部将图标复制进来




编辑完成后,保存功能,点击右上角按钮,导出文件










 





 
OK,这样就大工告成了,希望本教程可以对你有所帮助!!!

 
 
 
 
  查看全部
在1.2.0中,AUI将图标样式分离了出来,方便开发者进行修改。ttf字体图标的替换和修改我们可以借助一些字体编辑软件来操作BirdFont(这个也是我一直在用的),也可以另外建立ttf文件进行扩展。下面说一下如果进行扩展:
我们可以从阿里图标库 http://www.iconfont.cn/  中选择图标,并打包下载,解压后看到以下文件:

QQ20160417-0@2x.png

在里面我们用到有iconfont.css、iconfont.ttf,如果想使用svg的话可以一并引入。
把上面两个文件放到css文件夹中,做简单的修改,避免冲突我们需要将font-family重新命名,和删掉没用的字体文件
@font-face {font-family: "自定义字体名称";
src: url('mami-iconfont.ttf') format('truetype');
}

.iconfont {
font-family:"自定义字体名称" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
其他的可以保持不变,修改完成后保存,页面使用时使用时将css文件引入,然后就可以直接<i class="iconfont icon-*"></i>来调用了。
 
下面介绍下BirdFont编辑ttf文件,编辑ttf文件时需要有一定的矢量图绘制基础,以mac的BirdFont为例:
第一步

QQ20160417-4@2x.png

 
 
第二步
点击指向按钮,选择要编辑的ttf文件

QQ20160417-3@2x.png

 
第三步,双击箭头指向方向

QQ20160417-5@2x.png

 
我们可以看到全部的图标了,双击一个图标进入编辑
 

QQ20160417-6@2x.png

 
左侧为工具栏,右侧为视图,我们可以直接用此软件编辑,也可以从外部将图标复制进来
QQ20160417-7@2x.png

编辑完成后,保存功能,点击右上角按钮,导出文件

QQ20160417-8@2x.png


QQ20160417-9@2x.png

 

QQ20160417-10@2x.png

 
OK,这样就大工告成了,希望本教程可以对你有所帮助!!!