用字体在网页中画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-style: normal;
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-size: 22px;
19  color: #c40000;-webkit-font-smoothing:antialiased;/* 消除锯齿 */
-moz-osx-font-smoothing:grayscale;
20}

0 0