阿里图标库的使用

1.无色图标
在HTML文件中引入iconfont.css文件
<link rel="stylesheet" href="iconfont/iconfont.css"/>
在要使用图标的位置
<i class="iconfont icon-qq"></i>
第一个类iconfont是所有图标的通用类，第二个icon-xiangyou-copy是该图标的特有类
可以在任意一个导入HTML的css文件中设置属性
如

.icon-xiangyou-copy{
 margin-left:35px;
}

2.彩色图标
导入js文件

<script type="text/javascript" src="jsp/carousel.js"></script>

在使用图标的位置

<svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-qq"></use>
     </svg>
 

icon-niuyouguo是类名，前面要加#

在css文件中设置样式

.icon{
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}

aria-hidden 的意思

图标的可访问性
　　现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性。
　　如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
　　如果你所创建的组件不包含任何文本内容（例如， 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。