首页 > 电脑专区 > 电脑教程 >

如何在Axure中使用FontAwesome字体图标

来源:互联网 2023-02-21 22:06:54 409

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。tjZ办公区 - 实用经验教程分享!

tjZ办公区 - 实用经验教程分享!

FontAwesome应用在web网页开发中非常方便,那么在原型设计中是否能使用呢?答案是肯定的,本文将介绍如何在Axure中应用FontAwesome字体。tjZ办公区 - 实用经验教程分享!

如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

工具/原料

  • Axure RP PRO7.0
  • FontAwesome4.3

方法/步骤

  • 1

    访问http://fortawesome.github.io/Font-Awesome/ 下载最新版本的FontAwesome(当前为4.3),解压下载的压缩文件tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

  • 2

    打开font文件夹,双击安装.otf和.ttf结尾的字体tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

  • 3

    打开Axure,点击菜单 发布>预览选项(或ctrl F5)>配置>web字体。tjZ办公区 - 实用经验教程分享!

    点击“ ”号,输入字体名称FontAwesome,选择链接到css文件,tjZ办公区 - 实用经验教程分享!

    输入地址:http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css 确定,关闭。tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

  • 4

    打开图标列表网址http://fortawesome.github.io/Font-Awesome/cheatsheet/ 选择中意的图标,复制图标 复制图标 复制图标(重要的事情说三遍)tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

  • 5

    在axure中拖入一个标签元件(任何可以输入文字的都行),设置字体为FontAwesome,将文本替换(粘贴)为刚复制的图标。tjZ办公区 - 实用经验教程分享!

    OK,你可以F5预览或者直接生成html了。tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

    如何在Axure中使用FontAwesome字体图标tjZ办公区 - 实用经验教程分享!

  • 5本页面未经授权抓取自百度经验
  • 注意事项

    • 生成的html,必须在连接Internet(能访问http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css)的电脑上,图标才能正常显示

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!tjZ办公区 - 实用经验教程分享!


    标签: AXURE字体图标使用

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码