正在载入...

本文要介绍的Perfect Icons 就是利用这个原理来产生社交网站按钮,不同的是它已将这些图示给开发为eot、woff、ttf 和svg 格式,档案大小更精简,而且能依照使用者的需要来调整图示尺寸而不会影响解析度(因此也就不用针对不同的按钮大小来设计出不一样的图片尺寸)。

网站名称:Perfect Icons
网站链结:http://perfecticons.com/

使用教学

STEP 1

Perfect Icons不是一个图示包,更精确地说它应该是「社交网站按钮产生器」,毕竟这些按钮在制作成多种字型和向量图格式后,要利用程式码来写进网站,并不是每个人都知道该怎么做。利用Perfect Icons在网页内把相关设定调整好,即时预览,没问题后将产生的程式码加入自己的网站就可以加入图示。

开启Perfect Icons后,可以发现它有两部分,左侧是设定项目、右侧为产生程式码。

Perfect Icons

STEP 2

先在设定项目调整按钮大小、圆角、距离、颜色等等,比较酷的是还能利用CSS3 来加入动态效果(Hover Effects),这些都不用我们自己写程式码,棒吧?

记得把底下的社交网站链结设定进去,预设有Facebook、Twitter、Google+ 等常见的社群网路服务,你可以依照需要来调整排序,或将用不到的删除。

Perfect Icons

STEP 3

Perfect Icons 不只有提供这六种社交网路按钮,从底下点开可以找到更多,如果你想显示的按钮比较特殊,可以在这里找找看有没有你需要的。点选后它就会被加入上面,前面步骤已经教过大家怎么调整顺序、设定链结。

Perfect Icons

STEP 4

设定完后,找到「Usage」的使用说明,其实不会太难使用,别被它吓到了!首先依照第一个步骤把Socicon.zip这个档案下载下来解压缩,可以取得eot、woff、ttf和svg等所需档案,在设定时把档案先上传到你的主机上。

然后将第二步骤产生的CSS档加入你网站的CSS档里,这里有个要注意的地方,就是程式码里src: url('PATH_TO/路径要改成你刚才上传档案的路径。

Perfect Icons

最后,把第三步骤的HTML 代码放入网站内要显示社交网站按钮的位置,如果你刚才的CSS 路径没有设定错误的话,就能看到美丽的Perfect Icons 了!是不是很精简呢?

值得一试的三个理由:

  1. 直接从网站上设定按钮,即可产生HTML 和CSS 程式码
  2. 图示已设计为eot、woff、ttf 和svg 等格式
  3. 利用CSS3 来产生按钮动态效果(Hover Effects)

本文链接:

关键词:Icons, Perfect, WordPress, 互联网, 社交网站按钮产生器, 软件,

(全文完        )

Comments

1 条评论(网友评论:1 条,博主回复:0 条)快速评论

  1. xiexie!!

你需要 登录 才可以回复.