!!字体图标(iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等)。 图片压缩
http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont
http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new 2015-10-27
http://isux.tencent.com/icon-font.html 图标字体化浅谈(教程) 2015-11-3
https://icomoon.io/app 图标字体生成器 IcoMoon!一个可以通过个性化设置来创建自定义图标(字体)的生成器 (打包下载的是一个个的svg和png,不用它了。)
http://fontello.com/ 图标字体生成器 Fontello (很好。还能用json配置文件方式保存项目)
http://alloyteam.github.io/gopng/ 雪碧图生成工具(好)
http://www.mobileui.cn/svg-icon-fuzzy-problems.html 四招帮你搞定SVG Icon的模糊问题(这个要看! 是关于illstrator的设置) 2015-11-17
http://www.iconres.com/ 一些国旗图标 2016-5-9
http://www.tuhaokuai.com/image/ 图片压缩(图好快) 2016-5-30
https://tinypng.com 图片压缩(国外。推荐用这个) 2016-5-30
一、iconfont 图标库的使用:
第一步引入,第二步定义iconfont样式:
/*第一步:使用font-face声明字体*/
@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的样式*/
.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;
}
第三步:
<i class="iconfont">3</i>
我换了个写法:(这样可以不用维护烦人的html里面的代码了!——"类似 这样的乱码" )
<style>
.icon1:before{content:"\e600";color:red;}
.icon2:before{content:"\e601"}
.icon3:before{content:"\e602"}
</style>
<i class="icon iconfont icon1"></i><br>
<i class="icon iconfont icon2"></i><br>
<i class="icon iconfont icon3"></i><br>
优点:略。
缺点:
1、要为图标建project,否则发生改动时,会导致图标的次序混乱。project只能绑定在自己账号中,这点不如Fontello
2、 这样的代码要写在页面的html中,很不好维护。写成<i class="icon iconfont icon3"></i>这种方式虽然也可以,但是自己还要手动处理大量代码,很烦人。而Fontello有现成的文件是直接生成的、可直接引用。
二、 Fontello 图标字体生成器(好用!推荐!) http://fontello.com/ 2015-11-4
config.json是配置文件。点击“扳手”图标,import,即可导入配置文件。
下载的文件中,css要使用这个:fontello-embedded.css
<i class="icon-star"><i> 就可以这样使用图标了。
用PSD图,转化为svg的步骤:
1.必须是矢量图,位图不能用。
2.photoshop的图层上,右键,转化为智能对象
3.photoshop的图层上右键,导出内容。存为: 1.psb
4.illustrator打开1.psb,文件——>另存为,面板中选 *.svg
三、雪碧图生成工具(好用!推荐!) http://alloyteam.github.io/gopng 2015-11-5
.sprite{display:inline-block;width:<%=w%>px;height:<%=h%>px;background-image:url("../images/sprite.png");background-repeat:no-repeat;}
.sp-<%=name%>{background-position:-<%=x%>px -<%=y%>px;}
CSS生成以后要改成这样的: (这是一堆图标 横向排列 的)
<style>
.sprite{display:inline-block;width:14px;height:14px;background-image:url("../images/sprite.png");background-repeat:no-repeat;}
.sp-j5-03{background-position:-0px 0;}
.sp-j5-04{background-position:-14px 0;}
.sp-j5-05{background-position:-28px 0;}
</style>
<i class="sprite sp-j5-03"></i>
<i class="sprite sp-j5-04"></i>
<i class="sprite sp-j5-05"></i>
<i class="sprite sp-j5-06"></i>
CSS生成以后要改成这样的: (这是一堆图标 纵向排列 的)
<style>
.sprite-sj{display:inline-block;width:14px;height:14px;background-image:url("../images/sprite.png");background-repeat:no-repeat;}
.sp-sj-01{background-position:0 -0px;}
.sp-sj-02{background-position:0 -40px;}
.sp-sj-03{background-position:0 -80px;}
.sp-sj-04{background-position:0 -120px;}
</style>
<i class="sprite-sj sp-j5-01"></i>
<i class="sprite-sj sp-j5-02"></i>
<i class="sprite-sj sp-j5-03"></i>
<i class="sprite-sj sp-j5-04"></i>
四、Glyphicons 字体图标,bootstrap自带。(约250个左右)
略。 要用的时候看文档。http://v3.bootcss.com/components/
<span class="glyphicon glyphicon-cog"></span>
五、font Awesome (约519个)图标的使用: http://fontawesome.io/icons/
完全不依赖JavaScript,因此无需担心兼容性。免费。为bootstrap设计,但可以完美兼容其它框架。缺点是有点偏大。
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" />
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>
<hr>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-left"></i>
<i class="fa fa-chevron-right"></i>
<hr>
<i class="fa fa-spinner"></i>
(1)只在你确定你非常需要 @font-face的时候才使用它;
(2)将你的 @font-face定义在所有的script标签前;
(3)如果你有许多字体文件,考虑将它们分散到几个域名下;
(4)不要包含没有使用的 @font-face声明——IE将不分它使用与否,通通加载;
(5)Gzip字体文件,同时给它们一个未来的过期头部声明;
(6)考虑字体文件的后加载,起码对于IE。
http://io-meter.com/2014/07/20/replace-icon-fonts-with-svg/ Web 设计新趋势: 使用 SVG 代替 Web Icon Font(阅读) 2015-11-4
http://www.cnblogs.com/0603ljx/p/4980261.html 矢量图标的使用(有谈兼容性的一部分内容可看) 2015-11-20
下面这部分,以后要抽出来成为一篇新博客:
Photoshop:
辅助线: 2016-6-7
ALT+V, E (这是添加辅助线);
按移动工具(V),——这是移动辅助线; 将辅助线拖回标尺(这是删除辅助线)
...
最新文章
- rsync 笔记之 list
- 一次性插入多条sql语句的几种方法
- 利用Sql实现将指定表数据导入到另一个数据库示例
- JS鼠标移入,移出事件
- 安装mysql后ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var mysql 启动不了
- jQuery 控制表单和表格
- 利用预渲染加速iOS设备的图像显示
- 用ffmpeg把H264数据流解码成YUV420P
- 深入理解计算机各种类型大小(sizeof)
- NSAssert使用摘抄
- Eclipse下安装/配置Jrebel6.X
- async: false的应用.
- C语言基础学习学习前的准备-2
- 【转】Appium测试安卓Launcher以滑动窗体获得目标应用
- cisco 2950 3550 3750 系列交换机密码破解
- OpenCms JSP 模板开发——创建一个简单的JSP模板
- ASCII Art (English)
- netcore服务程序暴力退出导致的业务数据不一致的一种解决方案(优雅退出)
- MySQL 分区建索引
- css3的动画特效--元素旋转(transition,animation)