@@ -1,4 +1,10 @@
<!doctype html> < html > < head > < meta charset =utf-8 > < title > p-iconfont</ title > < style > body {
<!doctype html>
< html >
< head >
< meta charset ="utf-8 ">
< title > p-iconfont</ title >
< style >
body {
margin : 0 ;
padding : 10px 20px ;
background : # fff
@@ -103,11 +109,41 @@
.icon-twitter : before {
content : "\f103" ;
}</ style > </ head > < body > < h1 > p-iconfont</ h1 > < div class =icons id =icons > < div class =icons__item data-name =email > < i class =icon-email > </ i > icon-email</ div > < div class =icons__item data-name =linkedin > < i class =icon-linkedin > </ i > icon-linkedin</ div > < div class =icons__item data-name =twitter > < i class =icon-twitter > </ i > icon-twitter</ div > </ div > < h1 > Usage</ h1 > < pre > < code > <i class="icon-< span id =name > name</ span > "></i></ code > </ pre > < footer > Generated by < a href =https://github.com/sapegin/grunt-webfont > grunt-webfont</ a > .</ footer > < script > ( function ( ) {
}
</ style >
</ head >
< body >
< h1 > p-iconfont</ h1 >
< div class ="icons " id ="icons ">
< div class ="icons__item " data-name ="email "> < i class =" icon-email "> </ i > icon-email</ div >
< div class ="icons__item " data-name ="linkedin "> < i class =" icon-linkedin "> </ i > icon-linkedin</ div >
< div class ="icons__item " data-name ="twitter "> < i class =" icon-twitter "> </ i > icon-twitter</ div >
</ div >
< h1 > Usage</ h1 >
< pre > < code > <i class="icon-< span id ="name "> name</ span > "></i></ code > </ pre >
< footer > Generated by < a href ="https://github.com/sapegin/grunt-webfont "> grunt-webfont</ a > .</ footer >
< script >
( function ( ) {
document . getElementById ( 'icons' ) . onclick = function ( e ) {
e = e || window . event ;
var name = e . target . getAttribute ( 'data-name' ) || e . target . parentNode . getAttribute ( 'data-name' ) ;
document . getElementById ( 'name' ) . innerHTML = name ;
document . getElementById ( 'name2' ) . innerHTML = name ;
}
} ) ( ) ; </ script > </ body > </ html >
} ) ( ) ;
</ script >
</ body >
</ html >
