CSS之fontAwesome代替网页icon小图标

前端开发 作者: 2024-08-20 08:40:01
引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常

下载

简单应用

<link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<!--[if IE]>
<link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->
span><i class="fa fa-link"></i> 链接</>

设置大小和颜色

span style="font-size:12px;">
br ="font-size:20px;"="color:red"="color:white;background-color:#003399;">

其他应用

<!DOCTYPE htmlhtmlhead>
    meta charset="utf-8"/>
    titletype="text/css"="stylesheet" href="css/font-awesome.min.css"[if IE]>
    <link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"/>
    <![endif]-->
    >
        html,body{width:100%;heightpadding0margin}
        .login_formDivbackground #f0f0f0opacity 0.8 20pxborder-radius 3px
        .login_formDiv .groupSame252px0 automargin-bottom 10pxtext-aligncenterpositionrelative
        .groupSame i absoluteleftfont-size 24pxcolor #999top5px
        .login_formDiv inputpadding-left40px30pxline-height 30px210px 14pxborder1px solid #999
        .login_formDiv .subtn #4AB6D5 !important250px3px1px solid #4AB6D5cursorpointer#fff}
    bodydiv ="login_formDiv"="groupSame"input ="text" placeholder="用户名"/><="fa fa-user"> div="password"="密码"="fa fa-unlock-alt"="submit" value="提交" class="subtn"/></>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65422.html