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字体文件。试试看,是不是很方便。

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

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

    粘贴自:https://blog.csdn.net/wangyuxuan_java/article/details/8778211 1:请你介绍一下你自己 这是面试官常问的问题.一般人回答这个问题过于 ...

  2. 转:java项目经验面试总结

    转载: 在前期已经讲过怎样分析自己,对自己进行一个准确的定位,选择一个合适的求职方向!并结合自己的实际个人情况来写一份针对性很强的个人简历!个人简历就是个人的广告!好的简历可以更受到用人需求单位青睐! ...

  3. 如何为Java面试准备项目经验

    1 提出问题 应届生朋友或Java程序员在找Java方面的工作时,一定会需要准备Java项目经验,但事实上不少求职者,是没有项目经验,或者只具有开源社区等的学习项目经验,这样的话,就很有可能在面试时无 ...

  4. 将 Net 项目升级 Core项目经验:(一)迁移Net项目为Net Core\Standard项目

    迁移Net项目为Net Core\Standard项目 背景: 我们公司内部有自己ORM开发框架,最新因为需要将系统迁移到国产服务器上,所以首先需要将最基础的ORM框架改造可以运行在国产服务器上.对于 ...

  5. Java项目经验——程序员成长的关键(转载)

    Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3.掌握用例驱动.以 ...

  6. Java项目经验

    Java项目经验 转自CSDN. Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的 ...

  7. OSG项目经验2<在场景中添加文字面版>

    添加文字版需要用到osg的三个名字空间:                         osgText::Text,这个类用来添加文字和设置文字的一些属性:                     ...

  8. Georgia Tech Online Master of Science in Computer Science 项目经验分享

    Georgia Tech Online Master of Science in Computer Science 项目经验分享 Posted on 2014/04/22 项目关键词:工科名校,计算机 ...

  9. java面试项目经验:框架及应用

    Java项目经验 Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3 ...

随机推荐

  1. tomcat报错:Wrapper cannot find servlet class ...

    tomcat发布工程时,在浏览器输入正确的地址,遇到如下问题: HTTP Status 500 - javax.servlet.ServletException: Wrapper cannot fin ...

  2. xxx was built without full bitcode" 编译错误解决

    xxx was built without full bitcode" 编译错误解决 iOS 打包上线 All object files and libraries for bitcode ...

  3. Agc017_D Game on Tree

    传送门 题目大意 给定一棵树,$1$号节点为根,两个人轮流操作,每次选择一个根节点外的点,删掉它以及它的子树,不能操作者输,求两人均采用最优策略下先手胜利还是后手胜利. 题解 经典问题树上删边游戏,根 ...

  4. 【Python】正则表达式中使用变量

    我们有时想把变量放进正则表达式中来匹配想要的结果.Python中使用 re.compile(r''+变量+''),其中正则表达式中的“变量”应为字符串形式. import re regex_test_ ...

  5. 使用Visual Studio进行单元测试-Shim类中无法找到参数包含CancellationTokenSource的方法

    Shim类中无法找到参数包含CancellationTokenSource的方法,这句话有点绕口,看例子. 一.代码 public class CancellationDemo { public in ...

  6. Spring之2:Spring Bean动态注册、删除

    IoC容器的初始化包括BeanDefinition的Resource定位.载入和注册这三个基本的过程. 一.Resource定位.BeanDefinition的资源定位有resourceLoader通 ...

  7. 移植完linux-3.4.2内核,启动系统后使用命令ifconfig -a查看网络配置,没有eth0

    问题: / # ifconfig / # ifconfig eth0  ifconfig: eth0: error fetching interface information: Device not ...

  8. JS---改变图片大小

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. java基础知识(11)---多线程

    多线程: 进程:正在进行中的程序.其实进程就是一个应用程序运行时的内存分配空间. 线程:其实就是进程中一个程序执行控制单元,一条执行路径.进程负责的是应用程序的空间的标示.线程负责的是应用程序的执行顺 ...

  10. centos6 搭建IPSEC

    http://www.maxwhale.com/how-to-install-l2tp-vpn-on-centos/ http://blog.earth-works.com/2013/02/22/ho ...