西西软件园多重安全检测下载网站、值得信赖的软件下载站!
西西首页 电脑软件 安卓软件 电脑游戏 安卓游戏 排行榜 专题合集

font awesome

v4.7.0 官方最新版
  • font awesomev4.7.0 官方最新版
  • 软件大小:655KB
  • 更新时间:2018-07-02 09:56
  • 软件语言:中文
  • 软件厂商:深圳市深海时代网络科技有限公司
  • 软件类别:国产软件 / 免费软件 / 图标工具
  • 软件等级:4级
  • 应用平台:WinAll
  • 官方网站:http://www.fontawesome.com.cn/
  • 应用备案:
好评:50%
坏评:50%

软件介绍

font awesome是一款功能强大的图标字体库程序,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。font awesome包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号,可以通过相应的语法添加在 Markdown 文档中,像 Emoji 一样配合文字使用。

功能特色:

 一套字库, 675个图标

FontAwesome是一种带有网页功能的象形文字语言,并收集在一个集合里。

 不需要 JavaScript 支持

更少的兼容性问题,因为该字体不需要javascript

 无限的扩展性

可缩放的矢量图形,每个图标在放大或者缩小的时候看起来都正常

 完全开源免费

该字体是完全开源并且免费的,查看许可证.

 CSS 控制

可以轻松的用css来控制字体的颜色,大小,阴影等!

 完美支持Retina屏幕

字体是矢量图,这意味着在高分辨率下也会完美显示。

 良好的兼容性

最初是为Bootstrap而设计的,现在Font Awesome适用于所有框架。

怎么装点markdown文档:

准备工作

要在 Markdown 文档中输入 Font Awesome,需要在文档中任意位置贴粘入如下语句(可以放在文档结尾处,以不影响直接在 Markdown 文档中的阅读):

<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> </head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

其中最后一行是表示此文档需要导入 Font Awesome 最新版本 5.0.13(截止至 2018.06.11)的图标符号,前面的四行是用于将 Font Awesome 4.x 版本的语句转化为 5.0.13 版本。这是因为在 2017 年年底发布的 5.0 版本中,对 4.x 版本的大量图标符号的名称进行了重写,加上此四行就可以同时使用 4.x 和 5.x 版本的语句。

插入符号

之后就可以直接插入各类 Font Awesome 符号了,其基础用法是:

<i class="fa fa-weixin"></i>

这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果:

微信和微博图标符号

获取符号名称

在 Font Awesome 的符号列表中搜索,就可以得到不同的符号的写法,点击符号名称右侧的复制图标,就可以复制它:

获取人人图标符号

获取了常用的符号名称,就可以把它保存在 TextExpander 或 LaunchBar 的 Snippets 等缩写工具中,以备之后快速调用。

还有一个更简单的方法,LaunchBar 中自带了一个 Font Awesome Icons 的动作,可以在其中直接搜索 Font Awesome 符号的写法,具体步骤是:

通过缩写如 FONT 检索到 Font Awesome Icons 动作,回车选择;

通过缩写检索目标符号,如 GOOGLE;

找到后按 → 方向键,在出现的列表中移动光标至右边标记为 HTML 的一行,按 &#8984;Command-C 复制,再在文档中贴粘。

LaunchBar 中的 Font Awesome Icons 动作

由于目前这个动作还并未随 Font Awesome 5.0 的发布一起更新,其中只包含了 4.x 中 786 个图标,且采用的是 4.x 版本的写法。这也就是在上文中需要加入将 4.x 版本转化为 5.0 版本的原因。

从此 LaunchBar 动作出复制出来的符号名称,包含了一个 aria-hidden="true" 的代码,它表示在让电脑朗读屏幕内容时,忽略掉此符号,对显示效果没有影响。如果你没有此需求,可保留此代码,也可以删掉。

修改符号格式

使用 Font Awesome 的另一个优点是,除了上述简单的符号调用,还可以对这些符号进行格式的修改,以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。

调节尺寸

要调节符号的尺寸,只需对其名称加上尺寸的参数,例如,要调大上文所述的微信图标符号的尺寸,只需把

<i class="fa fa-weixin"></i>

拓展写为:

<i class="fa fa-weixin fa-2x"></i>

即可得到加大尺寸的符号。

放大的微信图标

尺寸参数共有如下几阶,感兴趣的话可以自行尝试其效果:

fa-xs

fa-sm

fa-lg

fa-2x 至 fa-10x

转动

通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果,通过 fa-pulse 也可以变成 8 步旋转效果:

转动的符号

引用符下沉

在本文最开始使用的例子中,在引文块的最前面使用了如下代码,即可实现引用符下沉的效果:

> <i class="fas fa-quote-left fa-3x fa-pull-left"></i>

其中,

fa-quote-left 是前引号,

fa-3x 表示符号尺寸,

fa-pull-left 表示使符号下沉。

引用符下沉

软件标签: font awesome

软件截图

font awesome v4.7.0 官方最新版

其他版本下载

发表评论

昵称:
表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
TOP
软件下载