用字体在网页中画ICON图标——2

来源:互联网 发布:安东尼职业生涯数据 编辑:程序博客网 时间:2024/06/16 02:14

字体图标网址 https://icomoon.io/app/

icomoon使用教程地址  http://www.flowerboys.cn/font/article/fontsArticle/how-to-turn-your-icons-into-a-web-font.html

——————————————————————————————————————

使用

@font-face{
09  font-family: mui-global-iconfont;
10  src:url(fonts/font_icons_ui.eot);                                       /* IE9*/
11  src:url(fonts/font_icons_ui.eot?#iefix) format('embedded-opentype'),    /* IE6-IE8 */
12    url(fonts/font_icons_ui.woff) format('woff'),      /* chrome、firefox */
13    url(fonts/font_icons_ui.ttf) format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
14    url(fonts/font_icons_ui.svg#iconfont) format('svg')  /* iOS 4.1- */
15  }

————————————————————————————————————



HTML结构:

1<i class="icons icon-ui"> &#x343a; <i>
2<i class="icons icon-ui"> &#x3448; <i>
3<i class="icons icon-ui"> &#x3449; <i>
4<i class="icons icon-ui"> &#xf012b; <i>
5<i class="icons icon-ui"> &#xf0148; <i>

CSS样式:

01/* here is icons basic style */
02.icons{
03  display:inline-block;*display:inline;*zoom:1;
04  font-stylenormal;
05}
06 
07/* you can use css3's @font-face property to set yourself web font */
08@font-face{
09  font-family: mui-global-iconfont;
10  src:url(fonts/font_icons_ui.eot);                                       /* IE9*/
11  src:url(fonts/font_icons_ui.eot?#iefix) format('embedded-opentype'),    /* IE6-IE8 */
12    url(fonts/font_icons_ui.woff) format('woff'),      /* chrome、firefox */
13    url(fonts/font_icons_ui.ttf) format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
14    url(fonts/font_icons_ui.svg#iconfont) format('svg')  /* iOS 4.1- */
15  }
16.icon-ui{
17  font-family: mui-global-iconfont !important;
18  font-size22px;
19  color#c40000;-webkit-font-smoothing:antialiased;/* 消除锯齿 */
-moz-osx-font-smoothing:grayscale;
20}



0 0
原创粉丝点击