脑筋急转弯,最新版字体图标元件库共享,一套绝佳的矢量字体图标元件库,吞食天地

admin 3周前 ( 03-28 14:40 ) 0条评论
摘要: 最新版字体图标元件库分享,一套绝佳的矢量字体图标元件库...
向晚江湛

这次同享的FontAwesome v5字体图标元件库,是依据官方的最新版别v5.7.2收拾完结的,包括了更全面的图标类型和丰厚的图标数量,信任能够满意大多数同学在原型规划中的运用需求。

FontAwesome是一款依据CSS结构的矢量字体图标库,供给了丰厚的图标类型和各类常用的精巧图标,在前端开发和规划范畴中都十分盛行和受欢迎。FontAwesome的首要特征是支撑无限缩放和矢量输出,而且能够运用CSS所供给的一切特性对它们进行更改,包括:巨细、色彩、暗影或许其它任何支撑的作用。

因为FontAwesome字体图标具有轻量和友爱的特性,一起十分适合在Axure原愤恨的叶河型设男的相片计中进行运用,能够便利的完结按纽或元件的脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地交互款式作用。

我一向激烈推荐在原型设铭茶计中运用FontAwesome字体图标计划,现在同行中也有许多这款字体图标的运用爱好者。现在咱们遍及运用的是FontAwesome的版别为 v4.7版,因为这个版别官方现已在两年多曾经就中止更新了,所以现已无法满意新的运用需求。

这次同享的FontAwesome v5字体图标元件库,是依据官方的最新版别v5.7.2收拾完结的,包括了更全面的图标类型和丰厚的图标数量,信任能够满意大多数同学在原型规划中的运用需求。

twinklight
脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地

首先请依据下面的链接下载FontAwesome v5 Free版的【字易燃情愫体文件及元件库】文件包,下面我会具体FontAwesome v5 Free版字体图标在Axure原型规划中的运用办法。

FontAwesome v5 Free版字体及元件库下载:https://pan.baidu.com/s/1RnPZwEvpYRxd94mpmdCxew

注:包括v5 Free版字体文件及rplib元件库,初次运用需求装置字体。

FontAwesome v5 Free版字体图标计划专题:http://www.axureux.com/FontAwesome/Free.html

注:包括v5 Free版悉数图标列表,便利查找和仿制运用,后续将继续更新。

1. 装置FontAwesome v5 Free版字体文件

初次运用FontAwesome v5 Free版字体图标需求在本机上装置字体文件,在下载【字体文件及元件库】文件包解压缩后翻开【font-awesome-free\otfs】,将目录内3个字体文件完结装置。Win体系双击字体文件就会提示装置,Mac体系装置字体办法请自行百度。

字体装置完结后需求重新启动Axure,重启后选中字体时在字体列表中假如能看到【Fontawesome 5 Free】和【Fontawesome 5 Brands】,则代表字体现已装置成功。

2. 运用FontAwesome v5 Free版字体图标

榜首种运用办法,运用字体图标元件库。在【字体文件及元件库】文件包有供给的rplib格局的元件库文件,将元件库文件导入到Axure元件库中。

导入办法:在Axure软件界面的元件库面板中点击更多图标,然后挑选“载入元件库”,然后挑选现已下载好的rplib格局的元件库文件,这样就完结元件库载入了。在元件库的挑选鲸头鹤列表中能够切换到对应的元件库列表。运用脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地时从元件库列表中找到需求的图标,直接拖入到修正界面中就能够了。

第二种运用办法,经过字体图标专题页面的图标列表仿制。在图标列表中找到需求的图标用鼠标左键双击,然后点击右击挑选仿制图标字符,这仁青拉姆个操作跟在网页中仿制文本的操作是相同的。然后返回到Axure软件界面中,在对应的元件中将图标字符张贴进去。

这个时分咱们看到的爸爸和爸爸图标仍然是一个乱码字符,咱们需求选中这个乱码字符,在字体特色中将它的字体设置为【Fontawesome 5 大辽囚妃Free】或【Fontawesome 5 Brands】,图标就能正常显现了。

3. Axure中运用字体图标设置常见交互作用

Fontawesome字体图标具有跟字体相同的特性,咱们能够运用CSS所供给的一切特性对它们进行更改,包括:巨细、色彩、暗影等。设置办法跟设置字体的款式是共同的安哲秀萨德,选中图标字符在字体款式中就能够进行设置。

除此之外,咱们还能够对包括字体图标的元件设置选中、悬停、禁用等各种交互款式,这也是Fontawesome字体图标在原型规划中最易用的特色,用它来制造具有交互款式的按纽和组件会变古雷格尔星人得十分便利。

上面的演示为Axure中运用字体图标完结的按纽鼠标悬停交互作用,假如运用的是独立的图标tracob文件完结这种作用是十分复杂的,而在元件中刺进字体图标只需求简略的一步就能够完结了。

4. 如安在未装置字体的设备上显现字体图标

假如咱们现已在本机上装置了Fontawesome字体文件,在预览原型文件时字体图标都能够正常显现。而假如输出的原型在其它在未装置字体文件的电脑上演示时,图就打德原版视频标显现脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地为乱码该怎么处理?

榜首种办法,在发布设置中Web字体选项中增加外部Web字体CSS链接。添脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地加办法:发布—生成HTML文件—Web字体,勾选“包括Web字体”,点击加号图标,设置称号为【Font Awesome 5 Free】,将CSS链接地址增加到URL中,生成HTML文件即可。

FontAwesome v5 Free版字体图标外部Web字体脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地CSS链接(官方供给):https:宦途天才//use.fontawesome.com/releases/v5.7.2/css/all.css

第二种办法,在发布设置中的Web字体选项中增加本地Web字体CSS链接,运用这种办法是即便在未联网状态下图标也能正常显现。在增加本地CSS链接前需求将【字体文件及元件库】文件包中的【font-awesome-free】文件夹仿制到【Axure装置目录\DefaultSettings\Prototype_Files\resources\】中,下面为仿制完结后的截图。

完结仿制后再增加CSS链接,增加办法:发布—生成HTML文件—Web字体,勾选“包括Web字体”,点击加号图标,设置称号为【Font Awesome 5 Free】,CSS链接地址设置为【resources/font-awesome-free/css/all.css】,生成HTML文件即可。

5. 一个文件一起运用多个FontAwesome版别

FontAwesome字体图标的多个版别是能够在同一个Axure的原型文件中,运用时需求一起装置每个版别对应的字体文件或设置对应的WEB字体选项。

例如咱们在一个原型文件中一起运用了FontAwesome的v4.7、v5 Free、v5 Pro三个版别的字体图标,需求先装置这个三个版别对应的字体文件,然后在发布设置的Web字体设置中设置对应称号和CSS链接,v4.7设置名德宝洗车机称为【FontAwesome】, v5 Free设置称号为【FontAwesome 5 Fee】,v5 Pro设置称号为脑筋急转弯,最新版字体图标元件库同享,一套绝佳的矢量字体图标元件库,吞食天地【FontAwesome 5 Pro】,对应的CSS链接以对应专题页面或供给的CSS链接为准。

关于多版别设置首要用于处理在同一个原型文件运用了旧的v4.7版,一起又在武英热油泵这个文件运用新的v5 Free或v5 Pro版的状况。因为曾经的文件运用的都是4.7版,假如开始运用新的v5版别,必定会有一个过渡期。

不过,FontAwesome的版别是向下兼容的,假如你创立的是一个新的Axure文件并开始运用v5版别,主张不要再一起运用旧版别了。别的,v5 Pro版中现已包括了v5 Free版的悉数图标,假如现已运用了v5 Pro版,主张不要再一起运用v5 Free版了。

6. 字体图标无法正常显现问题阐明

首先应查看字体文件是否现已正确装置,或许装置的字体版别是否与运用的图标的版别是否共同。运用FontAwesome v5 Free版字体图标请依据第1点中的阐明装置Free版字体文件,用于增加外部Web字体CSS链接以Free版专题页面中供给的链接为准。

经过Free版专题页面中的图标列表仿制字体图标时,在Axure中需求设置正确的字体和图标类型,不然也将导致图标在预览时无法正常显现,具体设置办法在第2点中有具体阐明。

假如遇到Axure中图标能够正常显现,但是在预览时却是乱码的现象,一般是因为修正了页面的款式里边的“字体系列”选项导致的。这个字体系列的选项默许的是【Applied Font】,请不要去修正它,不然会掩盖页面中一切的字体特色设置而导致字体图标失效。

7. 关于图标运用的弥补阐明

在下载的【字体文件及元件库】文件包中还独自供给了FontAwesome v5 Free悉数图标的Svg格局,运用SVG格局图标不需求装置字体文件或设置WEB字体选项,直接将对应的图标文件拖入到Axure修正界面中即可。

SVG格局图标同样是矢量的,支撑无限扩大,一起在Axure中右击图标可转为化形状,然后能够修正它的色彩或其它款式。

本文由 @windir 原创发布于人人都是产品经李小龙之龙之兵士理。未经许可,制止转载。

题图来自Unsplash,依据CC0协议

色群 规划 开发 美图
声明:该文观念仅代表作者自己,搜狐号系信息发布渠道,搜狐仅供给信息存储空间效劳。
文章版权及转载声明:

作者:admin本文地址:http://www.txwangzhuan.cn/articles/585.html发布于 3周前 ( 03-28 14:40 )
文章转载或复制请以超链接形式并注明出处腾讯网络传奇故事,从一个人到10万人的创业奇迹