trick9191
/
wlyy2.0
フォーク元 Amoy2/wlyy2.0


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
							
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">箭头-右</div>
                    <div class="code">&amp;#xe601;</div>
                    <div class="fontclass">.jiantouyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd620;</i>
                    <div class="name">医院行业</div>
                    <div class="code">&amp;#xd620;</div>
                    <div class="fontclass">.yiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd600;</i>
                    <div class="name">口</div>
                    <div class="code">&amp;#xd600;</div>
                    <div class="fontclass">.kou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd601;</i>
                    <div class="name">喉咙</div>
                    <div class="code">&amp;#xd601;</div>
                    <div class="fontclass">.houlong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd602;</i>
                    <div class="name">全身</div>
                    <div class="code">&amp;#xd602;</div>
                    <div class="fontclass">.quanshen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd604;</i>
                    <div class="name">背部</div>
                    <div class="code">&amp;#xd604;</div>
                    <div class="fontclass">.beibu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd605;</i>
                    <div class="name">臀部</div>
                    <div class="code">&amp;#xd605;</div>
                    <div class="fontclass">.tunbu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd606;</i>
                    <div class="name">男生殖系统</div>
                    <div class="code">&amp;#xd606;</div>
                    <div class="fontclass">.nanshengzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd607;</i>
                    <div class="name">女生殖系统</div>
                    <div class="code">&amp;#xd607;</div>
                    <div class="fontclass">.nvshengzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd608;</i>
                    <div class="name">其他</div>
                    <div class="code">&amp;#xd608;</div>
                    <div class="fontclass">.other</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd609;</i>
                    <div class="name">下肢</div>
                    <div class="code">&amp;#xd609;</div>
                    <div class="fontclass">.xiazhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd60a;</i>
                    <div class="name">上肢</div>
                    <div class="code">&amp;#xd60a;</div>
                    <div class="fontclass">.shangzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd60b;</i>
                    <div class="name">脑</div>
                    <div class="code">&amp;#xd60b;</div>
                    <div class="fontclass">.nao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd60d;</i>
                    <div class="name">面</div>
                    <div class="code">&amp;#xd60d;</div>
                    <div class="fontclass">.mian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd60f;</i>
                    <div class="name">耳</div>
                    <div class="code">&amp;#xd60f;</div>
                    <div class="fontclass">.er</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd610;</i>
                    <div class="name">皮肤</div>
                    <div class="code">&amp;#xd610;</div>
                    <div class="fontclass">.pifu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd611;</i>
                    <div class="name">肌肉</div>
                    <div class="code">&amp;#xd611;</div>
                    <div class="fontclass">.jirou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd612;</i>
                    <div class="name">骨骼</div>
                    <div class="code">&amp;#xd612;</div>
                    <div class="fontclass">.guge</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd614;</i>
                    <div class="name">腹部</div>
                    <div class="code">&amp;#xd614;</div>
                    <div class="fontclass">.fubu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd603;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xd603;</div>
                    <div class="fontclass">.arrowdown</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd613;</i>
                    <div class="name">药箱</div>
                    <div class="code">&amp;#xd613;</div>
                    <div class="fontclass">.yaoxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd61b;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xd61b;</div>
                    <div class="fontclass">.arrowup</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd60c;</i>
                    <div class="name">鼻</div>
                    <div class="code">&amp;#xd60c;</div>
                    <div class="fontclass">.bi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd60e;</i>
                    <div class="name">女 胸部</div>
                    <div class="code">&amp;#xd60e;</div>
                    <div class="fontclass">.nvxiongbu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd615;</i>
                    <div class="name">手</div>
                    <div class="code">&amp;#xd615;</div>
                    <div class="fontclass">.shou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd616;</i>
                    <div class="name">心理</div>
                    <div class="code">&amp;#xd616;</div>
                    <div class="fontclass">.xinli</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd617;</i>
                    <div class="name">眼</div>
                    <div class="code">&amp;#xd617;</div>
                    <div class="fontclass">.yan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd618;</i>
                    <div class="name">腰部</div>
                    <div class="code">&amp;#xd618;</div>
                    <div class="fontclass">.yaobu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd619;</i>
                    <div class="name">幼童生殖部</div>
                    <div class="code">&amp;#xd619;</div>
                    <div class="fontclass">.ertongshengzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xd61a;</i>
                    <div class="name">足部</div>
                    <div class="code">&amp;#xd61a;</div>
                    <div class="fontclass">.zubu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe600;</i>
                    <div class="name">男 胸部</div>
                    <div class="code">&amp;#xe600;</div>
                    <div class="fontclass">.nanxiongbu</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>