FontAwesome v4.7.0字体图标方案

为您提供可缩放的矢量图标

v4.7.0图标 免费下载

字体版本： Free v4.7.0 图标数量： 673 更新时间： 2018-03-08

来源：FontAwesome v4.7.0版权归FontAwesome官网所有，本站只整理收集。

Font Awesome v4.7字体图标使用说明

  • 1

    系统安装：Font Awesome v4.7字体

    第一步、首次使用字体图标需要在本机上安装FontAwesome字体文件，点击上面的的字体下载按纽获得字体文件包。
    第二步、解压缩后打开【\font-awesome-4.7\fonts】，安装里面的FontAwesome.otf或Fontawesome-webfont.ttf这两个字体文件
    第三步、Win系统双击字体文件就会提示安装，Mac系统安装字体方法请见下面的链接。
    第四步、字体安装完成后需要重新启动Axure或PhotoShop等设计软件，重启后选中字体时在字体列表中如果能看到【Fontawesome】，则代表字体已经安装成功。

    Mac系统如何安装字体方法教程:

    查看视频教程
  • 2

    Web安装：本地安装

    第一步、将【font-awesome-4.7】文件夹拷贝到 你站点的根目录（也可放在站点其他目录，只要调用路径正确即可）；
    第二步、在页面里调用路径，将下面代码插入到页面的<head> </head > 之间；

    注意：这是安装路径【/font-awesome-4.7/css/font-awesome.min.css】根据自己安装位置调整即可；
    注释：【/font-awesome-4.7/css/】里有两个【font-awesome.css】和【font-awesome.min.min.css】文件，调用任何一个都可以；
    第三步、如何使用字体图标，请查看下面【使用说明】

  • 3

    Web安装：外部调用

    这种安装，只要在页面插入官网提供的CSS库链接即可，无需下载和部署字体，简单、方便；唯一就是保证外部链接提供的服务稳定；
    第一步、在页面里调用路径，将下面代码插入到页面的<head> </head > 之间；

    第二步、如何使用字体图标，请查看下面【使用说明】

  • 4

    常用设计软件，如何使用Font Awesome v4.7字体图标

    第一步、通过 【Font Awesome v4.7字体库专题页面】在列表中找到需要的图标，点击即可复制图标。这个操作跟在网页中复制文本的操作是相同的
    第二步、返回到常用的软件界面中，在对应的文字编辑中将图标字符粘贴进去。
    第三步、这个时候我们看到的图标仍然是一个乱码字符，我们需要选中这个乱码字符，在字体属性中将它的字体设置为【Fontawesome】，图标就能正常显示了



  • 5

    Web页面，如何使用FontAwesome v4.7字体图标

    前面通过【2】或【3】的Web安装，已经安装和调用字体CSS样式库，现在教大家如何在页面使用字体图标；
    第一步、通过 【v4.7字体库专题页面】 在列表中找到需要的图标，点击即可复制图标。这个操作跟在网页中复制文本的操作是相同的
    第二步、将粘贴过来的图标在页面里，单独增加一个内联元素标签，如：<span>、<b>、<i>等标签，
    第三步、加完标签后，再个字体样式即可显示图标；格式示例：<span class="fa">粘贴的图标</span>
    效果展示：
    未加样式的效果：、、
    增加样式的效果：、、
  • 6

    更多图标推荐

    A、Fontawesome包含的图标类型基本满足原型设计的需要，为了便于大家进行查找和使用其中的图标，我们将Fontawesome v4.7的600+款全部图标整理并在下面列了出来，强烈建议你将本页面添加到收藏夹中。
    B、如果在设计中需要更多的图标，可以查看网站的图标推荐，建议配合使用阿里的IconFont图标库，它提供的图标数量达到了数百万，网址：http://www.iconfont.cn
    阿里IconFont FontAwesome官网 bootcdn样式库

复制成功