NEWS动态

你给我们一个空间,我们能做得更好
You give us a lot of space, we can do

客服

如何在Axure RP 8 中规范使用 Font Awesome 图标库完成

  • 时间:2019-11-30
  • 浏览:

  正在做交互打算的时刻,行动产物打算师咱们往往需求用极少圭表的图标库,通过导入现成的图标能够极大地进步咱们的打算效用。常用的图标库,寻常供应SVG,PNG图片,打算师下载自此能够直接用到交互打算文献中,开荒同窗将图片文献放正在图标文献夹中供页面代码运用,比方:

  但这种陈旧的形式,对待前端开荒职员来说并禁止易。因而新一代的图标库,他们供应给打算师矢量图片( SVG格局或字体格局),时时彩中奖走势打算师正在打算稿中记载该图标的名称,并示知前端开荒职员。正在开荒历程中,前端同窗通过挪用图标库供应的CSS样式,并填上对应图标的名称,便能够急速正在Web上映现出种种精深的矢量图标,比方:

  即日咱们要点讲述,借使楷模运用Font Awesome图标库完结交互打算,并让前端同窗欢畅地跟咱们互帮。

  Font Awesome为您供应可缩放的矢量图标,您能够运用CSS所供应的全体性子对它们实行更改,网罗:巨细、色彩、暗影或者其它任何增援的恶果。官方网页为:

  遴选”手势“,网页自愿跳转出到全体”手势“图标个人,点击图标结尾的”复造“按钮,能够复造到该图标的名称,如下红框所示hand-o-right,这里很是厉重,这个名称对待打算师之后导入图标到Axure 或者 前端同窗都很是有效。

  因为Font Awesome图标库是基于字体来运用的,因而咱们起首需求正在官方主页的最上面点击马上下载(目前最新版为 V4.7.0), 然后解压压缩包,点击 TrueType 字体文献,完结字体的安置:

  网上许多网友保举加载Font Awesome的元件库,以此急速完结图标的运用。不过笔者以为因为Font Awesome时常更新,而对应的Axure 元件库很难急速更新,因而倡议大多己方正在官网上通过图标的分类,急速遴选己方心仪的图标,获取名字自此,正在图标库中搜寻定位图标,然后复造粘贴到Axure中运用即可。

  不过因为之前的页面只准许咱们复造图标的名字,没法直接复造 图标,因而咱们没法正在Axure中将图标运用。因而咱们需求去到”字体库的图标备忘单页面“ (,按名字搜寻图标。比方:咱们之前遴选向右的手势为 hand-o-right, 然后咱们正在CheatSheet页面搜寻(Ctrl+F)到该图标,如下所示:

  不过需求贯注咱们必定更要正在该图标的声明内部备注图标的名字,如许便于前端同窗开荒时急速完结代码的编写,如下图所示:

  但咱们完结打算自此,需求将线框图颁布成HTML文献,这时刻借使将文献放到一个没有安置过Font Awesome 字体的电脑上,字体图标能够无法显示,因而咱们需求正在颁布的时刻做极少行为。

  为了确保自此用来查看线框图的电脑正在断网的情状下同样能够寻常查看,咱们需求采用离线字体的形式完结HTML文献的天生。如下图所示,增添Web字体时,咱们遴选@font-face,并正在的确参数处填写:

  为了确保咱们无法访谒Font Awesome官网时也能够急速复造图标贴入Axure中,咱们能够将 Font Awesome 的CheatSheet 备份为PDF文献。正在Chrome浏览器中,输入,然后鼠标右键遴选 打印,如下图所示:

  贯注: 如上图红框所示,请将主意打印机遴选为”另存为PDF“,唯有如许天生的PDF文献中的 图标才是能够复造的。

  Font Awesome图标运用正在简直任何地方,只需求运用CSS前缀 fa ,再加上图标名称(前端同窗能够查看打算同窗线框图中的评释)。 Font Awesome是为运用内联元素而打算的。咱们普通更喜爱运用 i ,由于它更简单。 但现实上运用 span 本领愈加语义化。如下所示:

  hello 思问下 复造操作的确是复造哪一块呀 我复造了英文不可,图标也不可,编码也仍是不可呀,求指教

  我复造过去 配置成Fontawesome字体仍是显示的英文数字 并没有造成图标呀?遴选什么元件复造?我看你截图是box 我也是用的box然后粘过去的呀,瑰异;

  人人都是产物司理(是以产物司理、运营为主题的练习、相易、分享平台,集媒体、培训、社群为一体,全方位任事产物人和运营人,建立9年举办正在线+期,线+场,产物司理大会、运营大会20+场,笼盖北上广深杭成都等15个都会,内行业有较高的影响力和着名度。平台分散了稠密BAT美团京东滴滴360幼米网易等着名互联网公司产物总监和运营总监,他们正在这里与你沿途发展。

友情链接