您的位置：首页 > 其它

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

2015-09-16 14:56 393 查看
字体图标网址 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"
>
㐺 <
i
>
2
<
i
 
class
=
"icons
icon-ui"
>
㑈 <
i
>
3
<
i
 
class
=
"icons
icon-ui"
>
㑉 <
i
>
4
<
i
 
class
=
"icons
icon-ui"
>
󰄫 <
i
>
5
<
i
 
class
=
"icons
icon-ui"
>
󰅈 <
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
}



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航