更丰富的符号工具包 Font Awesome

我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注,例如使用 Emoji。然而 Emoji 在这方面仍然有存在一些不足,如:

  • 颜色与文字风格不统一,
  • 在不同系统的平台上显示不统一,
  • 种类有限,很多时候找不到合适的表情。

这时,可以在文档写作时引入另一个更丰富的符号工具包 Font Awesome

简介

Font Awesome 是一个字体和图标工具包,包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号,可以通过相应的语法添加在 Markdown 文档中,像 Emoji 一样配合文字使用。它提供了 Font Awesome Free 和 Font Awesome Pro 两个方案,前者可以免费使用,后者需要付费以使用更多图标。但实际上免费方案中就提供了上千个图标,足够日常使用。

准备工作

要在 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">

我自己注册了一个免费的,有些图标是用不了的。

插入符号

其基础用法是 :

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

“fa” 为前缀,“weixin” 为图标名称

fa版本5中不推荐使用 该前缀。新的默认值是fas实体样式和fab品牌样式。

更多的符号可以在 Font Awesome 的符号列表中搜索。

修改样式

除了简单的调用,还能调整大小、旋转、排列、层叠等。

(i)  调节尺寸

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

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

拓展写为:

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

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

  • fa-xs
  • fa-sm
  • fa-lg
  • fa-2x 至 fa-10x

(ii) 动画

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

例如:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-2x fa-pulse"></i>

(iii) 更多用法

除此之外,Font Awesome 还有许多其它调节格式的语法,有兴趣的读者可在这个 Font Awesome 官方说明页面进行查阅:

How to Use | Font Awesome

参考链接:https://sspai.com/flipboard/post/45217

原文地址:https://www.cnblogs.com/lfri/p/11517300.html

时间: 2024-11-10 17:32:00

更丰富的符号工具包 Font Awesome的相关文章

CSS3 字体【@font-size使用全攻略-配合font squirrel】

篇1: CSS3 字体 CSS3 @font-face 规则 以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体. 使用CSS3,网页设计师可以使用他/她喜欢的任何字体. 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户. 您所选择的字体在新的CSS3版本有关于@font-face规则描述. 您"自己的"的字体是在 CSS3 @font-face 规则中定义的. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 属性

javascript开源大全

javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node.js jQuery图表插件-jQchart HTML5-开发框架-jQuery-Mobile 跨浏览器的RIA框架-ExtJS Flash视频播放器-JW-PLAYER jQuery表单插件-jQuery.form jQuery-File-Upload 可视化HT

CSS @font-face规则 引用外部服务器字体

CSS 层叠样式表可以对页面进行更精细的样式设置,当然有些人就像自定义文字的字体,但是默认font-family 内置字体样式也就只有几种. 如何才能把第三方字体引入呢? 下面介绍一个CSS 规则  @font-face @font-face是CSS3中的一个功能,它主要是把自定义的Web字体嵌入到网页中,让网页上使用的字体可以不受客户端字体库的限制. 这个功能是非常好用的,但是在使用中还是会碰到一点问题,主要就是IE下会出现一些问题. 来看看@font-face介绍: 语法: @font-fa

超过18种不同Code 128条码的字体样式的条形码控件工具包Code 128 Barcode Font Advantage Package

Code 128 Barcode Font Advantage Package包含了6种不同格式的18种不同的字体样式,可以在Windows, Macintosh, UNIX等多种操作系统下使用.同时您还可以获得相应的字体工具.宏和字体源码编辑工具,更好的方便您在您的应用程序中使用字体样式. 具体功能: Code 128 Font Advantage Package 不仅仅是一个多种字体样式的工具包,它包含了6种不同格式的超过18种不同Code 128条码的字体样式 ,您还将获得针对Code 1

font awesome 符号字体

http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色

Font Awesome符号字体

http://www.fontawesome.com.cn/ 引用CSS包之后根据图标库找到所需的图标代码 使用i标签或者a标签皆可,符号为文字性质,可以直接通过修改text颜色从而修改符号颜色

【转】LaTeX 符号命令大全

函数.符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{x} \acute{\eta} \check{\alpha} \grave{\eta} \breve{a} \ddot{y} \dot{x} \hat{\alpha} \tilde{\iota} 函数 语法 效果 语法 效果 语法 效果 \sin\theta \cos\theta \tan\theta \arcsin\frac{L}{r} \arccos\frac{T}{r} \arctan\frac{L}{T} \sin

微信公众平台开放JS-SDK(微信内网页开发工具包)

微信公众平台开放JS-SDK(微信内网页开发工具包),这次开放接口是质的飞跃,是对开发者和广大用户一个利好的消息.未来的公众号图文消息会更丰富多彩,准备脑洞大开吧! 微信公众平台今日面向开发者开放微信内网页开发工具包(微信JS-SDK). 通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照.选图.语音.位置等基本能力,还可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 微信JS-SDK主要包含以下能力: 1.分享类接口 支持

允许嵌入到PDF,Word文档和其他文件的条形码控件UPC/EAN Barcode Font Advantage Package

IDAutomation的UPC/EAN Barcode Font Advantage Package是一个先进的字体产品,它所用的工具,宏和源代码可以使用一个单一的字体文件来创建UCC-12, UPCA, UPCE, EAN8, EAN13, JAN, ISBN 和Bookland条形码.该字体满足ANSI, ISO和IEC 2000规格说明要求(ISO 15420:2000). 具体功能: 为了创建合适的UPC和EAN条形码类型,打印的字符必须要从UPC/EAN条形码字体数据表上定义的表格上