阿里巴巴矢量图标库怎么在线应用@font-face

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等，可以免费用于贸易项目。可以到官方站点查看更具体的信息和应用样例。下面仅记录应用步调：1到官网高低载最新版本的Font Awesome2解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesomecss和font-awesomemincss），fonts下有有5个，如下：3在须要应用的html或者其它类型的页面中引入样式文件，如下：<link href="css/font-awesomecss" rel="stylesheet" />4查看font-awesomecss文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：＠font-face { font-family: ""FontAwesome""; src: url（""/fonts/fontawesome-webfonteot？v=410""）; src: url（""/fonts/fontawesome-webfonteot？＃iefix&v=410""） format（""embedded-opentype""）， url（""/fonts/fontawesome-webfontwoff？v=410""） format（""woff""）， url（""/fonts/fontawesome-webfontttf？v=410""） format（""truetype""）， url（""/fonts/fontawesome-webfontsvg？v=410＃fontawesomeregular""） format（""svg""）; font-weight: normal; font-style: normal;}必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。4最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：<div class="list-group"> <a class="list-group-item" href="＃"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="＃"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="＃"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="＃"><i class="fa fa-cog fa-fw"></i> Settings</a> </div> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-car"></i> <i class="fa fa-car fa-3x"></i>别的，font awesome 和BootStrap连络可以达到更好的结果。上方的html工作结果如下：测试demo地址：进入

需要先将QQ表情转化成JPG格式，然后添加到阿里旺旺表情库里就可以了。
阿里旺旺表情添加方法：
1、进入聊天页面后，单击“选择表情”图标，进入表情页面后，单击“管理表情”按钮。进入“管理我的表情”；
2、进入“管理我的表情”后，单击“添加表情”按钮；
3、找到下载好的表情包，双击进入，单击其中一张表情，Ctrl+A全选，单击“打开”按钮，添加成功；
4、如果感觉所有的表情混在一起不方便，可以进入“管理我的表情”进行分组管理。点击“分组管理”选择“添加分组”；
5、添加表情分组；
6、将新添加的表情全部选中，单击右键，选择“移动表情”-新建表情分组“张小盒”。新建分组成功。

---