您的位置：首页 > Web前端

字体图标简单使用

2016-11-20 22:39 330 查看
          
    字体包下载到本地：

            

                

 

                  <!--本地使用,没联网也能使用，字体图标已经存在本地了-->

        <!--<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>-->

        

        <!--这个外链，引用的是阿里的服务器数据,没联网使用不了-->

        <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_sb6e86lbm3n5ewmi.css"/>

        

        <!--本地使用,没联网也能使用  JS方式,支持彩色-->

        <!--<script src="iconfont/iconfont.js" type="text/javascript" charset="utf-8"></script>-->

        

        <!--外链,引用额阿里的服务器数据,没联网使用不了-->
        <script src="//at.alicdn.com/t/font_3ma82gklkgrs5rk9.js" type="text/javascript" charset="utf-8"></script>

                    <style type="text/css">

            .o {
                font-size: 300px;
                color: red;
            }
            .w {
                font-size: 100px;
                color: plum;
            }
            .icon-huangguan {
                font-size: 66px;
            }
            .icon-iconfonthuangguan {
                font-size: 30px;
            }
            
            .hg {
                font-size: 20px!important;
            }
            
            
        </style>   
        

    

<style type="text/css">

            /*JS格式设置子图图标属性*/

         .icon {

          /* 通过设置 font-size 来改变图标大小 */

          font-size: 50px;

          width: 2em;

          height: 2em;

          /* 图标和文字相邻时，垂直对齐 */

          vertical-align: -0.15em;

          /* 通过设置 color 来改变 SVG 的颜色/fill */

          color: red;        /*改变不了多彩图标,只能改变纯色图标*/

          fill: currentColor;

          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示

             normalize.css 中也包含这行 */

          overflow: hidden;

        }

            

        </style>

    </head>

    <body>

        <div id="box">

            <div class="xixi">

                <!--第一种用法-->

                <i class="iconfont o"></i><br />

                <i class="iconfont w"></i>

                <!--第二种用法-->

                <i class="iconfont icon-huangguan"></i>

                <i class="iconfont icon-iconfonthuangguan"></i>

                <!--第三种方式-->

                <!--纯色图标-->

                <svg class="icon" aria-hidden="true">

                    <use xlink:href="#icon-huangguan" class="hg"></use>

                </svg>

                <!--多彩图标-->

                <svg class="icon" aria-hidden="true">            <!--多彩图标只能JS引进,其他方式引进-->

                    <use xlink:href="#icon-26"></use>

                </svg>

            </div>

        </div>

    </body>

</html>  

                
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  WEB前端
相关文章推荐
新的分享
章节导航