项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标

Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它。它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度。

在bootstrap刚出来的时候,它拥有丰富的组件、美丽优雅的排版布局、漂亮的设计、卓越的兼容性等优点,风靡了全球。是的,特别是它的字体图标,对于前端来说,摆脱了切图的麻烦;对于设计师来说,不用为设计图标而烦恼,bootstrap为我们提供了足够多的字体图标,200多个供我们选择使用。

随着人们审美眼光的提高,过去的审美观已经不能满足现在的审美观。过去我们以为简洁优雅是一种美,现在我们可能还要要求更多的内容,精细的线条美感已经成为WEB表达的趋势。例如阿里的iconfont, 官网网址:http://www.iconfont.cn/. 我们来看2组图标的对比:

    

  可以看出,细线框的图标,更美观一点。需求已经有了,一起来看下图标的改造。

(1)如果项目中没有用bootstrap及glyphicons字体图标,事情就变的简单了。我们只需要打开iconfont官网,http://http://www.iconfont.cn/, 寻找自己需要的图标。加入购物车中,如图。

  

  选好需求的图标,之后进入右上角的购物车,

  点击进入购物车页面,

  

  进入电脑下载文件夹里,可看到已导出的文件,有ttf, svg, eot, woff及CSS,还有HTML文件DEMO。

  是的,把demo拿到项目中就可以用啦。

(2)项目中已经使用Bootstrap了,如果把字体图标类名也改掉,页面模板及相应的文件都需要修改,对于大型的项目来说,工作量一定很大。在不影响目前项目使用的情况下进行修改,就需要对字体图标的相应的字体文件进行修改。这就有点难度了,需要借助icommon来实现,在线生成工具:https://icomoon.io/app/#/select

  1,进入主页面,

  

  2,新建一个图集

  

    3,添加glyphicon.svg图片

点击页面里的importIcon按钮即可添加,或者使用自定义的直接拖拽到图集即可。

  

  可以看到glyphicon图标已加进来,选择需要修改的图标,然后在点击修改按钮,弹出修改弹框,在弹框里修改图片或替换图片,这里的图片是SVG的,如图:

  

  替换该图标的SVG图片,然后关闭对话框,已经可以看到我们的图标已经替换啦,接着替换其他图标,

  

  替换完后,导出字体文件,点击最下面的“generate font”按钮, 进入导出页面,点击download下载。

  这样我们的字体图标改造就完成了,是不是很方便,既不用改HTML文件,也不用改CSS文件,只需要替换掉glyphicon的.svg、.eot、 .ttf、 .woff字体文件。试试看,是不是很方便。

时间: 2024-10-05 23:37:18

项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标的相关文章

转:java项目经验面试总结

转载: 在前期已经讲过怎样分析自己,对自己进行一个准确的定位,选择一个合适的求职方向!并结合自己的实际个人情况来写一份针对性很强的个人简历!个人简历就是个人的广告!好的简历可以更受到用人需求单位青睐!好的简历才能让你获得面试的机会!我们还针对面试列出了j2ee方面的知识点!不管是笔试还是面试都是会考到这些非常重要的知识点!面试的技术内容并不会有想象中的那么难,主要注重基础和细节!细节决定一切!所以列罗的那些知识点是需要下功夫去准备的!当然列罗的那些知识点只是一些在面试中经常会出现的问题集!每家企

java程序员面试交流项目经验

粘贴自:https://blog.csdn.net/wangyuxuan_java/article/details/8778211 1:请你介绍一下你自己 这是面试官常问的问题.一般人回答这个问题过于平常,只说姓名.爱好.工作经验,这些简历上都有.其实,面试官最希望知道的是求职者能否胜任工作,包括:最强的技能.最深入研究的知识领域.个性中最积极的部分等. 2:说说你的家庭 面试时询问家庭问题不是非要知道求职者家庭情况,探究隐私,而是要了解家庭背景对求职者的塑造和影响.面试官希望听到的重点也在于家

Lync 项目经验-12-为某上市企业Skype for Business购买Godday证书

<要想看Lync 2013升级SFB 2015真实项目经验:请看Lync 项目经验-01-到-Lync 项目经验-10> 本系列博文: Lync 项目经验-01-共存迁移-Lync2013-TO-SFB 2015-规划01http://dynamic.blog.51cto.com/711418/1858520 Lync 项目经验-02-共存迁移-Lync2013-TO-SFB 2015-规划02http://dynamic.blog.51cto.com/711418/1859143 Lync

Lync 项目经验-14-为某客户用Exchange 2016 UM作为总机的问题

值得高兴的事: 在中国! 在我的客户中! 有使用Exchange Server 2016 UM作为总机的客户! 传说中:都只有老外用UM来干活! 问题: 当手机拔总机,再拔#,再拔分机号! 如果客户端设置的在20秒内转语音邮箱!结果:不到20秒,如果不接,自动挂断! 如果客户端设置的在15秒内转语音邮箱!结果:不到15秒,如果不接,自动转语音邮箱! 测试过程: 微软统一沟通企业应用之语音邮箱当IVR使用: 1. 手机 136xxxxxxxx 2. 企业总机: 010-88xxxx88-AA-38

Lync 项目经验-13-为某上市企业仅安装Skype for Business 2016(图解)

****************************************************************************** <Skype for Business Server 2015-项目实战>(免费系列规划.部署博文) http://dynamic.blog.51cto.com/711418/1655481 **************************************************************************

一中项目经验总结

        最近在连海师哥的带领下,和慕夏一起做廊坊一中评教的项目,从软考到现在差不多有一个多月的时间了.除了机房合作,这算是第一次真正的去实战一个项目.下面是一些小的经验,当作积累吧.         一.原型图        原形图我们都记不清迭代了多少次了,原型图是未来系统的原形,也就是软件的界面,展现给用户最直观的东西.对开发人员来书原型图也是十分重要的,后面的实体.类图和数据库的设计都离不开它,原型图我们大概花了十天的时间,虽然有些长,却十分重要.         经验累积:  

近期Responsive web design项目经验分享

关于meta   <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width, minimal-ui"> minimal-ui 默认浏览器的URL缩小 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.

java程序员面试----交流项目经验(摘自百度)

1:请你介绍一下你自己这是面试官常问的问题. 2:说说你的家庭面试时询问家庭问题不是非要知道求职者家庭情况,探究隐私,而是要了解家庭背景对求职者的塑造和影响.面试官希望听到的重点也在于家庭对求职者的积极影响. 3:说说你的最大优缺点这个问题的概率很大,面试官喜欢求职者从自己的优点说起,中间加一些小缺点,最后再把问题转回到优点上,突出优点的部分. 4:就你申请的这个职位,你认为你还缺什么?面试官喜欢问求职者的弱点,但精明的求职者一般不直接回答.他们希望看到这样的求职者:继续重复自己的优势,然后说:

Java项目经验——程序员成长的钥匙

Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3.掌握用例驱动.以架构为核心的主流开发方法 没有人愿意自己一辈子就满足于掌握了一些代码实现的技巧,别人告诉你要实现什么,你就用代码堆砌来实现别人的要求!你必须学会从整个项目的角度去思考!你必须学会假如你是项目经理,你该如何思考!你必须学会假如你是架构师,你该如何思考!你必须掌握针对某个特定问题领域的分析方法! 关于基