整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天简单分享一下在Axure RP 8 中如何使用 Font Awesome 图标库完成设计。
在做交互设计的时候，作为产品设计师我们常常需要用一些标准的图标库，通过导入现成的图标可以极大地提高我们的设计效率。常用的图标库，一般提供SVG，PNG图片，设计师下载以后可以直接用到交互设计文件中，开发同学将图片文件放在图标文件夹中供页面代码使用，例如：
但这种古老的方式，对于前端开发人员来说并不方便。所以新一代的图标库，他们提供给设计师矢量图片( SVG格式或字体格式），设计师在设计稿中记录该图标的名称，并告知前端开发人员。在开发过程中，前端同学通过调用图标库提供的CSS样式，并填上对应图标的名称，便可以快速在Web上呈现出各种精美的矢量图标，例如：
今天我们重点讲述，如果规范使用Font Awesome图标库完成交互设计，并让前端同学快乐地跟我们合作。
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。官方网页为： http://fontawesome.io
对于英文不是太好的同学可以访问由“极风游科技”提供的 中文页面： http://fontawesome.dashgame.com
选择页面顶部的“图标”按钮，可以看到所有图标的分类：
选择”手势“，网页自动跳转出到所有”手势“图标部分，点击图标最后的”复制“按钮，可以复制到该图标的名称，如下红框所示”hand-o-right”，这里非常重要，这个名称对于设计师之后导入图标到Axure 或者 前端同学都非常有用。
由于Font Awesome图标库是基于字体来使用的，所以我们首先需要在官方主页的最上面点击”立即下载”（目前最新版为 V4.7.0）, 然后解压压缩包，点击 “TrueType 字体文件”，完成字体的安装：
网上很多网友推荐加载Font Awesome的元件库，以此快速完成图标的使用。但是笔者认为由于Font Awesome经常更新，而对应的Axure 元件库很难快速更新，所以建议大家自己在官网上通过图标的分类，快速选择自己心仪的图标，获取名字以后，在图标库中搜索定位图标，然后复制粘贴到Axure中使用即可。
但是由于之前的页面只允许我们复制图标的名字，没法直接复制 图标，所以我们没法在Axure中将图标使用。所以我们需要去到”字体库的图标备忘单页面“ ( http://fontawesome.io/cheatsheet/) ，按名字搜索图标。例如：我们之前选择向右的手势为 “hand-o-right”, 然后我们在CheatSheet页面搜索（Ctrl+F）到该图标，如下所示：
然后我们复制红框中的手势图标贴入Axure中，但是我们发现图标没有出现，而是一个方框：
原因是字体默认为Arial,我们切换为 Font Awesome,以后图标正常显示：
但是需要注意我们一定更要在该图标的说明里面备注图标的名字，这样便于前端同学开发时快速完成代码的编写，如下图所示：
但我们完成设计以后，需要将线框图发布成HTML文件，这时候如果将文件放到一个没有安装过Font Awesome 字体的电脑上，字体图标可能无法显示，所以我们需要在发布的时候做一些手脚。
首先我们点击页面右上角的 发布-生成HTML文件…
为了确保以后用来查看线框图的电脑在断网的情况下同样可以正常查看，我们需要采用离线字体的方式完成HTML文件的生成。如下图所示，添加Web字体时，我们选择@font-face，并在具体参数处填写：
font-family: FontAwesome;
src:url(‘fontawesome-webfont.ttf’) format(‘truetype’);
然后将TrueType字体库放入HTML文件所在的文件夹里面，如下图所示：
然后我们将整个文件夹拷给前端同学他们就可看到了，如下图所示：
为了确保我们无法访问Font Awesome官网时也可以快速复制图标贴入Axure中，我们可以将 Font Awesome 的CheatSheet 备份为PDF文件。在Chrome浏览器中，输入 http://fontawesome.io/cheatsheet/，然后鼠标右键选择 打印，如下图所示：
注意： 如上图红框所示，请将目标打印机选择为”另存为PDF“，只有这样生成的PDF文件中的 图标才是可以复制的。
Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称（前端同学可以查看设计同学线框图中的注释）。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。如下所示：
<iclass=”fa fa-hand-o-right”></i>fa-hand-o-right
由于藕不是前端攻城狮，所以不敢班门弄斧了，具体可以去网站上看看用法，如下所示：
好啦，到目前为止，大家应该很清楚Font Awesome应该如何使用了吧，快去试试吧。
本文由 @逻辑画疯 原创发布于人人都是产品经理。未经许可，禁止转载。
Easy-ICON 是一款高颜值、简单易用的web字体图标库，只需引入一个css文件（或一个npm包），您就可以简单地使用1000多个漂亮的图标。
https://gitee.com/theajack/easy-icon
https://github.com/theajack/easy-icon
以下是css文件引入的一个简单例子
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="easy-icon-all.css">
</head>
<body>
<i class="ei-heart ei-xs" style="color: red;"></i>
<i class="ei-spinner-indicator ei-spin"></i> <!--一个旋转的loading-->
<i class="ea-star-half-empty"></i>
<i class="et-like ei-l"></i>
<i class="ef-html5 ei-xl"></i>
<i class="el-goods ei-4x"></i>
</body>
</html><link rel="stylesheet" href="easy-icon.css">
<link rel="stylesheet" href="easy-icon-a.css">
<link rel="stylesheet" href="easy-icon-f.css">
<link rel="stylesheet" href="easy-icon-t.css">
<link rel="stylesheet" href="easy-icon-l.css">或者使用一个集合的版本
<link rel="stylesheet" href="easy-icon-all.css">npm i easy-icon;只需要引用一次即可:
与css文件引用一样，可以模块独立引用，无需使用全部
import 'easy-icon';
import 'easy-icon/easy-icon-a.js';
import 'easy-icon/easy-icon-f.js';
import 'easy-icon/easy-icon-t.js';
import 'easy-icon/easy-icon-l.js';或者使用集合版本
import 'easy-icon/easy-icon-all.js';Easy ICON使用起来十分简单，您只需要在您想要使用的地方插入一个如下的标签即可:
<i class="ei-spmile"></i>需要注意的是，五个模块对应的前缀不一样，分别为
让图标旋转，可以通过添加 ei-spin 类来使图标旋转:
<i class="ei-spinner-snake ei-spin"></i>ei-spin 类对五个模块表现一致
选择尺寸
Easy ICON 内置了八种不同大小的尺寸，从小到大依次为::xs,s,l,lg,2x,3x,4x,5x
尺寸类对五个模块表现一致
<i class="ei-smile ei-s"></i>
<i class="ei-smile ei-xs"></i>可以使用任何自定义css样式来覆盖默认的样式
easy-icon是一个开源不久的字体图标库，集成了1500+个图标，方便安装，使用简单！可以尝试！
开发人员需要语法突出显示工具作为辅助符号的一种形式，以帮助我们在结构化编程语言或标记中编写代码。有些代码高亮库附带了额外的功能，例如拼写检查器，代码折叠，以及提高文本上下文中总体代码可读性的功能，从而使编码人员可以检测可能跨越几页的代码中的错误。笔者将在本文介绍10个语法高亮库
SHJS是一个JavaScript库，可以在浏览器上突出显示客户端的HTML源代码。它使用GNU源代码突出显示的语言定义，从而使其能够突出显示以多种语言编写的源代码。SHJS带有Highlight程序中的几个主题，并根据GNU v3许可证分发。
http://shjs.sourceforge.net/
SyntaxHighlighter是功能齐全的客户端语法突出显示工具。
https://github.com/syntaxhighlighter
Highlight.js是Web的语法突出显示库。它的功能包括对185种语言和89种样式的支持。它具有自动语言检测和多语言代码突出显示功能。它也可用于所有node.js，并可以与任何标记一起使用，并且与任何其他JS框架完全兼容。
https://github.com/highlightjs/highlight.js
Rainbow是一个轻量级的代码突出显示器（1.4kb），只需要一个JS模块即可突出显示所展示的语言。颜色和字体是通过CSS主题支持定制的。通过按快捷键组合，它可以帮助开发人员轻松按颜色跟踪许多变量。
https://github.com/ccampbell/rainbow
Microlight.js是一个开源库，通过突出显示（尽管提供了编程语言）并且没有其他语言包或样式来改进代码段。与其他代码突出显示库不同，它使用常规突出显示策略。它突出显示代码，而不考虑编程语言或代码结构。
https://github.com/asvd/microlight
CodePress是一个基于Web的编辑器，其语法突出显示代码是用JavaScript编写的。在浏览器上输入文字时，它将实时为文本着色。它具有代码片段，快捷方式，自动完成和多窗口功能。
http://codepress.sourceforge.net/
JavaScript Syntax Highlighter（Jush）用于以以下语言突出显示客户端语法：HTML，JavaScript，CSS，PHP，HTTP和SMTP协议，SQL，PHP.ini和Apache配置。
https://jush.sourceforge.io/
Prism.js是一个轻量级的语法突出显示工具，它考虑了可扩展的内置现代Web标准。如今，它已在数千个网站中实现。它简单，直观，轻如羽毛，高度可扩展，更快且易于样式化。
https://prismjs.com/
Syntax.js是一个简单的代码语法突出显示库，对于任何编程语言而言，该语法都很小，灵活，主题化且速度更快，它有三个内置主题：
https://github.com/rainner/syntaxy-js
CodePrinter是一个JavaScript可视代码编辑器，它支持语法突出显示，自定义代码格式以及13种内置主题。
https://www.cssscript.com/demo/lightweight-code-editor-with-pure-javascript-codeprinter/
*请认真填写需求信息，我们会在24小时内与您取得联系。
