gongmingqm10

Life is a journey, not a destination

Fontello 使用心得

| Comments

Overview

Fontello icon generator http://fontello.com/,fontello上可以选择各种各样的常见的icon,所有的icon都是字体格式,所以对于icon的大小和颜色你都可以像使用字体一样方便的使用他们。


最近尝试在构建一个rails应用,于是自然而然就想到用之前项目中的fontello图标,对于Developer来说,有了fontello和rails我开始不需要担心街面上图标或者按钮的样式问题了。

在fontello中选择所需的图标后点击下载即可进行下载一个zip压缩包,解压缩之后里面就会包含我们所需的几个文件。将这几个文件放置到我们project的assets下面,即可直接使用。

用法


  1. Download: 选择图标后直接选择下载;
  2. Move: 将font文件夹中的所有文件和config.json移到vendor/assets/fonts文件夹中,将fontello.css移动到app/assets/stylesheets/fontello.css, 并在需要使用的相关页面中import此css文件;
  3. Usage: 在html页面中直接使用 即可使用到名为icon-plus的图标;
  4. Update: 对于图标的下载我们一般在需要图标时才会下载,于是我们非首次下载时就需要update,在fontello网站上先import选择config.json,然后再搜索我们想要的图标,再次进行下载,将下载好的新文件覆盖之前的文件,update操作便完成了;

Don’t repeat yourself


对于fontello这种update图标然后覆盖的模式,我曾经极度讨厌,甚至认为还不如使用font awesome进行一次性的下载好,然后直接使用就可以了,后来发现fontello的强大之处在于它集合了许多种图标资源,所以上面的图标库更丰富,如果一次性下载估计也是件挺浪费资源的事情,因为我们只会用到少量的图标。所以我们不得不需要什么图标就去下载然后覆盖更新~~

但是作为一名开发人员,这种重复的工作如果让我们自己做,就有点太浪费了。所以决定把这些琐碎重复的事情交给计算机做。也就是每次我下载下来,我只要运行脚本,这些文件就会自动复制到我所需的工程中。于是使用shell命令解决这个问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/bin/sh
unzip -u $1
if [ ! -d $2/vendor/assets/fonts ]; then
  mkdir $2/vendor/assets/fonts
fi 
cp -r $1/font/fontello.eot $2/vendor/assets/fonts
cp -r $1/font/fontello.svg $2/vendor/assets/fonts
cp -r $1/font/fontello.ttf $2/vendor/assets/fonts
cp -r $1/font/fontello.woff $2/vendor/assets/fonts

cp -f $1/config.json $2/vendor/assets/fonts/config.json

cp -f $1/css/fontello.css $2/app/assets/stylesheets/fontello.less
echo 'copy fontello successfully'

文件名为fontello.sh, 首先为其添加可执行权限 chmod +x fontello.sh, 如果下载下来的新的包名为fontello-1234.zip,那么只要执行命令./fontello.sh fontello-1234 ~/project/helloworld

永远不要你自己做重复的事情,如果真有这些事情请让计算机自行实现一切会轻松很多!

Comments