图标
在项目中,经常会用到图标,框架内置了50个CSS图标及整理了若干个UNICODE图标,同时也提供建议使用的字体图标库,可根据需要选择。
字体图标
因站点使用图标数量及要求不同,框架默认不包含字体图标库,我们建议使用阿里ICONFONT或Font Awesome矢量图标库,包含了丰富的字体图标,可按需选择。
- ICONFONT
- 国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
点击访问 - Font Awesome
- 国外专业字体图标库,含有丰富的网络应用图标,免费使用。
点击访问 - Fontello
- 国外免费的字体库,丰富的图标字体素材。
点击访问
图标分享
整理了部份图标,可下载使用:
Font Awesome 4.7
在Phtotshop中使用
图标字体是非常适合用在网页设计中,因为它们可以用作图标显示在屏幕上,同时由于是用字体的,可以缩放和渲染,是一个非常高效的解决方案。在Photoshop中使用字体,须先安装,具体方法如下:
- 先打开下载的字体文件,找到.otf格式的字体文件,点击安装;
- 打开Phtotoshop,新建文档;如Photoshop为打开状态,有时候需要重启软件才能找到字体;
- 打开图标显示页面,然后选中图标复制;部份浏览器无法复制,可按F12,查看元素>计算值,复制图标小方块☐;
- 在Photoshop中选择文字,然后粘贴;
- 调整字体的大小、颜色、样式等,即完成了图标的使用过程。
纯CSS图标
框架内置了50个纯CSS图标,全为CSS渲染,点击图标即可复制样式名称:
箭头图标
信息提示
信息提示
页面应用
使用方法
直接在元素上使用图标样式即可,同时也可以使用文本的颜色及字号大小改变图标效果。
<i class="icon-position"></i> <i class="icon-position text-main"></i> <i class="icon-position text-info size-large"></i>
UNICODE图标
框架整理了180多个UNICODE图标,直接点击图标即可复制HTML代码,将粘贴即可,图标如下:
箭头图标
应用图标
星号图标
对错图标
音乐图标
版权图标
货币图标
实体图标
使用方法
直接复制图标的HTML编码即可使用,同时也可以使用文本的颜色及字号大小改变图标效果。
<span>★</span> <span class="text-main">★</span> <span class="text-danger size-large">★</span>