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

最新推荐文章于 2024-06-24 10:48:15 发布

原创最新推荐文章于 2024-06-24 10:48:15 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何利用字体图标库Icomoon在网页中创建ICON图标。提供了Icomoon的网址和使用教程链接，包括HTML结构和CSS样式的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字体图标网址 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
}