用字体在网页中画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"
> 㐺 <
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
}
0 0
- 用字体在网页中画ICON图标——2
- 用字体在网页中画icon图标
- 用字体在网页中画ICON图标(笔记)
- 用字体在网页中画ICON图标
- 网页中画icon小图标
- 如何在网页的标题栏中加入icon图标
- 网页的ICON图标
- 在网页中实现icon小图标的几种方法
- 如何在MenuItem中添加icon图标
- 如何在网页标题栏title加入logo(icon)图标
- 如何在网页标题栏title加入logo(icon)图标?
- 如何在网页标题栏title加入logo(icon)图标
- icon、png网页开发中所需要的小图标
- 设置网页的icon图标
- 网页添加icon小图标
- currentColor属性——配合图标字体玩网页端icon
- 在alv grid中的列中设置icon图标
- 如何在HTML中使用图标字体 - icon font?
- shell脚本实现虚拟机实验环境的简单配置
- POJ - 2100 Graveyard Design(尺取法)
- Eclipse:Could not create the view: Plug-in org.eclipse.jdt.ui was unable to load class org.eclipse.j
- JVM调优的几种策略
- 虚拟机下Mysql不能远程连接解决方案
- 用字体在网页中画ICON图标——2
- linux c回调函数
- Unity+NGUI实现截图加上传
- 读“关于数据科学,书上不曾提及的三点经验”对数据挖掘,机器学习方面的实战感悟
- test2.8
- 在DirectX 8 中进行2D渲染
- 值得开发者(安卓)必备的十八大Android开发资源
- 如何用好消息推送(JPush)为app拉新、留存、促活
- [Elasticsearch] 全文搜索 (二) - 多词查询及查询的合并