Google

如何在PS与前端开发上使用Font Awesome字体

Written on:八月 27, 2015
Comments are closed

这是一套非常棒的字体图标,能够应用到原型中。

下载后的压缩包中包含了Fontawesome字体文件的多种格式,一般比较常用的是“.ttf“格式。可根据需求进行安装。

下载地址:http://pan.baidu.com/s/1gdnNHOf

fontawesome

http://fontawesome.dashgame.com/

Axure如何使用Font Awesome的

在AxureRP7.0中使用FontAwesome字体,需要先安装字体,重启Axure,然后在【生成】-【Web字体】中添加一个配置,选择 “链接到.css文件”,将下方任意一个地址复制粘贴进去即可。这样设置完毕,即使别人没有安装这个字体文件,在浏览器中查看原型时也能正常看到图标。

附:在线CSS文件链接地址

国内地址:http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.css

国外地址:https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

webfont

设计工具PS如何使用Font Awesome的

  1. 首先关闭现在正在使用的photoshop。
  2. 下载Font Awesome OTF格式的字体。把他保存在本地上。
  3. 在你的电脑上安装这个.otf的字体,删除掉刚才保存的字体。
  4. 打开你的photoshop,然后创建一个空白的文档。使用这个font awesome的字体格式。
  5. 打开这个网站上的图标,复制上面的图标(注意要复制它的图标,然后粘贴到你的ps里面)
  6. 像修改其他字体那样修改它的大小和颜色吧。你会喜欢上它的。

前端开发Font Awesome的使用

  1. 你只需要到:http://fontawesome.io 下载压缩包然后解压到你的项目中。
  2. 在你的html头部的head里面添加对相应的font-awesome的样式。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. 根据这里的案例开始你的项目。
  4. 如需兼容IE浏览器,可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
    <!--[if IE 7]>
    <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
    <![endif]-->

Sorry, the comment form is closed at this time.