项目经验: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字体文件。试试看,是不是很方便。
项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标的更多相关文章
- java程序员面试交流项目经验
粘贴自:https://blog.csdn.net/wangyuxuan_java/article/details/8778211 1:请你介绍一下你自己 这是面试官常问的问题.一般人回答这个问题过于 ...
- 转:java项目经验面试总结
转载: 在前期已经讲过怎样分析自己,对自己进行一个准确的定位,选择一个合适的求职方向!并结合自己的实际个人情况来写一份针对性很强的个人简历!个人简历就是个人的广告!好的简历可以更受到用人需求单位青睐! ...
- 如何为Java面试准备项目经验
1 提出问题 应届生朋友或Java程序员在找Java方面的工作时,一定会需要准备Java项目经验,但事实上不少求职者,是没有项目经验,或者只具有开源社区等的学习项目经验,这样的话,就很有可能在面试时无 ...
- 将 Net 项目升级 Core项目经验:(一)迁移Net项目为Net Core\Standard项目
迁移Net项目为Net Core\Standard项目 背景: 我们公司内部有自己ORM开发框架,最新因为需要将系统迁移到国产服务器上,所以首先需要将最基础的ORM框架改造可以运行在国产服务器上.对于 ...
- Java项目经验——程序员成长的关键(转载)
Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3.掌握用例驱动.以 ...
- Java项目经验
Java项目经验 转自CSDN. Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的 ...
- OSG项目经验2<在场景中添加文字面版>
添加文字版需要用到osg的三个名字空间: osgText::Text,这个类用来添加文字和设置文字的一些属性: ...
- Georgia Tech Online Master of Science in Computer Science 项目经验分享
Georgia Tech Online Master of Science in Computer Science 项目经验分享 Posted on 2014/04/22 项目关键词:工科名校,计算机 ...
- java面试项目经验:框架及应用
Java项目经验 Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3 ...
随机推荐
- tomcat报错:Wrapper cannot find servlet class ...
tomcat发布工程时,在浏览器输入正确的地址,遇到如下问题: HTTP Status 500 - javax.servlet.ServletException: Wrapper cannot fin ...
- xxx was built without full bitcode" 编译错误解决
xxx was built without full bitcode" 编译错误解决 iOS 打包上线 All object files and libraries for bitcode ...
- Agc017_D Game on Tree
传送门 题目大意 给定一棵树,$1$号节点为根,两个人轮流操作,每次选择一个根节点外的点,删掉它以及它的子树,不能操作者输,求两人均采用最优策略下先手胜利还是后手胜利. 题解 经典问题树上删边游戏,根 ...
- 【Python】正则表达式中使用变量
我们有时想把变量放进正则表达式中来匹配想要的结果.Python中使用 re.compile(r''+变量+''),其中正则表达式中的“变量”应为字符串形式. import re regex_test_ ...
- 使用Visual Studio进行单元测试-Shim类中无法找到参数包含CancellationTokenSource的方法
Shim类中无法找到参数包含CancellationTokenSource的方法,这句话有点绕口,看例子. 一.代码 public class CancellationDemo { public in ...
- Spring之2:Spring Bean动态注册、删除
IoC容器的初始化包括BeanDefinition的Resource定位.载入和注册这三个基本的过程. 一.Resource定位.BeanDefinition的资源定位有resourceLoader通 ...
- 移植完linux-3.4.2内核,启动系统后使用命令ifconfig -a查看网络配置,没有eth0
问题: / # ifconfig / # ifconfig eth0 ifconfig: eth0: error fetching interface information: Device not ...
- JS---改变图片大小
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- java基础知识(11)---多线程
多线程: 进程:正在进行中的程序.其实进程就是一个应用程序运行时的内存分配空间. 线程:其实就是进程中一个程序执行控制单元,一条执行路径.进程负责的是应用程序的空间的标示.线程负责的是应用程序的执行顺 ...
- centos6 搭建IPSEC
http://www.maxwhale.com/how-to-install-l2tp-vpn-on-centos/ http://blog.earth-works.com/2013/02/22/ho ...