BUI开放图标库使用说明

BUI

最近一直在考虑开发一套属于自己的UI框架,不过说实话UI框架开发是一个费时费力的活,而单纯的依靠业余时间显然是不行的,所以波波一直在考虑在AUI的基础上去做,之所以叫BUI其实一方面是为了跟AUI区分,另一方面BUI也确实不同于AUI,在一些功能特性上都做了优化,同时也将字库做成本地化和网络化。下面是波波BUI字库中的一些图标,目前共收集整理了218个,后期会不定期的添加新的图标,使用方法如下:

1、编写bui_font.css文件,直接调用网络字库。代码如下:

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1472909583_4677052.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1472909583_4677052.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1472909583_4677052.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1472909583_4677052.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1472909583_4677052.svg#iconfont') format('svg'); /* iOS 4.1- */
}

2、在html中调用图标的方法。示例代码:

<!--在html中引入字库-->
<link rel="stylesheet" href="../bui_font.css">
<!--填写正确的CSS路径-->

<!--在html中定义iconfont-->
<style>
   .iconfont{font-family:"iconfont";
   font-size:16px;font-style:normal;}
</style>

<!--在html中需要图标的位置调用图标-->
<div>
   <button class="btn btn-primary">
        <i class="iconfont">&#xe6c8;</i>
   </button>
</div>

3、完整图标库及对应代码:

请点击此处

4、字库本地包下载:点击下载

常见问题汇总:

①字体图标在safair或chrome浏览器下被加粗怎么办?

答:以上现象是由于字体图标存在半个像素的锯齿,在浏览器渲染的时候直接显示一个像素了,导致在有背景下的图标显示感觉加粗;所以在应用字体图标的时候需要对图标样式进行抗锯齿处理,CSS代码设置如下:

.iconfont{-webkit-font-smoothing: antialiased;}

②字体图标在IE7浏览器显示中图标右侧出现小方框现象;如下图所示:

图标旁边有方块

图标旁边有方块

答:出现以上现象可以对引用字体图标的非块标签进行以下CSS定义:

display: block;

③字体图标在pc端的chrome浏览器下出现严重的锯齿怎么办?

答:出现以上现象可以对字体图标的边缘进行模糊;(只支持webkit内核浏览器,参数数值不宜设置得很大,这会带来图标加粗的问题)

-webkit-text-stroke-width: 0.2px;

未经允许不得转载:波波助手 » BUI开放图标库使用说明

赞 (1)

牛人热评 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址