PATH:
home
/
letacommog
/
letaweb
/
css
/
linecons
<!DOCTYPE html> <html> <head> <title>Flaticon WebFont</title> <link rel="stylesheet" type="text/css" href="flaticon.css"> <meta charset="UTF-8"> <style> body { font-family: sans-serif; line-height: 1.5; font-size: 16px; padding: 20px; color:#333; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-size: 30px; font-style: normal; margin-left: 20px; color: #333; } .image p { font-size: 12px; margin: 0px; clear: none; width: 300px; line-height: 40px; } .text { float: left; font-size:14px; margin-top: 15px; } .text ul { margin-left:0px; color:#111; margin-bottom:20px; } .text .ex { font-size:12px; color:#666; margin-left:35px; display:block; } .text ul li { margin-top:10px; list-style:none; } .num { background:#66A523; color:#fff; border-radius:20px; padding:1px; display:inline-block; width:22px; height:22px; text-align:center; margin-right: 5px; } .text ul strong { font-weight:normal; color:#000; } .image { width: 280px; float: left; margin-bottom: 15px; margin-right: 30px; } #glyphs { clear: both; } .image p:nth-child(even) i { clear: none; } .glyph { display: inline-block; width: 120px; margin: 10px; text-align: center; vertical-align: top; background: #FFF; } .glyph .glyph-icon { padding: 10px; display: block; font-family:"Flaticon"; font-size: 64px; line-height: 1; } .glyph .glyph-icon:before { font-size: 64px; color: #666; margin-left: 0; } .class-name { font-size: 12px; } .author-name { font-size: 10px; } a{ color: #66A523; } .instructions { font-style:italic; font-size:22px; margin-bottom:10px; } .iconsuse { font-size:22px; font-style:italic; padding-top:20px; margin-top:20px; border-top:1px solid #bbb; } .usetitle { margin-bottom: 10px; font-size: 20px; font-style: italic; } .class-name:last-child { font-size: 10px; color:#888; } .class-name:last-child a { font-size: 10px; color:#555; } .class-name:last-child a:hover { color:#66A523; } .glyph > input { display: block; width: 100px; margin: 5px auto; text-align: center; font-size: 12px; cursor: text; } .glyph > input.icon-input { font-family:"Flaticon"; font-size: 16px; margin-bottom: 10px; } h1.logo { font-size: 40px; letter-spacing: -1px; margin-top: -16px; text-transform: lowercase; border-bottom:1px solid #bbb; } h1.logo strong { font-size: 16px; font-family:sans-serif; font-weight:normal; color:#333; } h1.logo a { color:#34302d; text-decoration: none; } h1.logo a span { color:#66A523; } #footer { padding-top:40px; clear:both; text-align:center; } #footer a { color:#66A523; } textarea { margin: 0px; width: 800px; height: 150px; border: 1px solid #CCC; resize: none; background: #EEE; } .author-link, .attrDiv a{ font-size: 12px; color: #333; text-decoration: none; } .external { display: block; } .attrDiv { font-size: 12px; } .attribution { border-top: 1px solid #AAA; margin: 10px 0; padding-top: 15px; } </style> </head> <body> <header> <h1 class="logo"> <a href="http://www.flaticon.com"> <span>FLAT</span>ICON</a> <strong>Font Demo</strong> </h1> </header> <section class="demo"> <div class="text"> <div class="instructions">Instructions:</div> <ul> <li> <p> <span class="num">1</span>Copy the "Fonts" files and CSS files to your website CSS folder. </li> <li> <p> <span class="num">2</span>Add the CSS link to your website source code on header. <br /> <span class="ex"><head> <br/>... <br/><link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css"> <br/>... <br/></head></span> </li> <li> <p> <span class="num">3</span>Use the icon class on "display:inline" elements: <br /> <span class="ex">Use example: <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span></span> </li> </ul> </div> </section> <section id="glyphs"><div class="glyph"> <div class="glyph-icon flaticon-banknote"></div> <div class="class-name">.flaticon-banknote</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/banknote_4436">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-big58"></div> <div class="class-name">.flaticon-big58</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/big-star_4417">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-big59"></div> <div class="class-name">.flaticon-big59</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/big-megaphone_4427">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-big60"></div> <div class="class-name">.flaticon-big60</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/big-trash_4447">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-blockade"></div> <div class="class-name">.flaticon-blockade</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/blockade_4445">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-bubble1"></div> <div class="class-name">.flaticon-bubble1</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/speech-bubble_4428">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-camera6"></div> <div class="class-name">.flaticon-camera6</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/camera-video_4443">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-camera7"></div> <div class="class-name">.flaticon-camera7</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/camera-with-flash_4449">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-cup4"></div> <div class="class-name">.flaticon-cup4</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/coffee_7756">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-data3"></div> <div class="class-name">.flaticon-data3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/database_4426">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-diamons"></div> <div class="class-name">.flaticon-diamons</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/diamond_7720">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-display14"></div> <div class="class-name">.flaticon-display14</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/display-screen_7429">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-fire"></div> <div class="class-name">.flaticon-fire</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/fire_4454">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-heart3"></div> <div class="class-name">.flaticon-heart3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/heart-profile_4432">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-lab"></div> <div class="class-name">.flaticon-lab</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/chemistry_4425">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-leaf5"></div> <div class="class-name">.flaticon-leaf5</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/leaf-newpaper_4456">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-like"></div> <div class="class-name">.flaticon-like</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/like_4421">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-location4"></div> <div class="class-name">.flaticon-location4</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/location-gps_4420">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-news"></div> <div class="class-name">.flaticon-news</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/news-notice_4442">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-noodle"></div> <div class="class-name">.flaticon-noodle</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/noodle-bowl_4434">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-note2"></div> <div class="class-name">.flaticon-note2</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/note-song_7430">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-packet"></div> <div class="class-name">.flaticon-packet</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/envelope_4418">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-paperclip2"></div> <div class="class-name">.flaticon-paperclip2</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/paperclip-archive_4429">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-paperplane"></div> <div class="class-name">.flaticon-paperplane</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/paperplane_4422">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-parameters"></div> <div class="class-name">.flaticon-parameters</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/parameters_4444">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-pen3"></div> <div class="class-name">.flaticon-pen3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/pen-student_4452">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-phone12"></div> <div class="class-name">.flaticon-phone12</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/smartphone_7428">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-photo3"></div> <div class="class-name">.flaticon-photo3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/photo_4424">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-search3"></div> <div class="class-name">.flaticon-search3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/search-information_4455">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-see"></div> <div class="class-name">.flaticon-see</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/see_4451">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-settings3"></div> <div class="class-name">.flaticon-settings3</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/settings-program_4450">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-shop1"></div> <div class="class-name">.flaticon-shop1</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/shop-food_4433">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-small56"></div> <div class="class-name">.flaticon-small56</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/small-wristwatch_4419">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-small57"></div> <div class="class-name">.flaticon-small57</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/small-key_4423">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-small58"></div> <div class="class-name">.flaticon-small58</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/small-calendar_4430">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-small59"></div> <div class="class-name">.flaticon-small59</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/small-truck_4435">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-small60"></div> <div class="class-name">.flaticon-small60</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/small-cloud_4437">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-small61"></div> <div class="class-name">.flaticon-small61</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/small-bulb_4446">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-sound"></div> <div class="class-name">.flaticon-sound</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/sound-on_4440">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-stack"></div> <div class="class-name">.flaticon-stack</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/inbox_4439">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-study"></div> <div class="class-name">.flaticon-study</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/study-hat_7427">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-t1"></div> <div class="class-name">.flaticon-t1</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/t-shirt_4453">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-tag6"></div> <div class="class-name">.flaticon-tag6</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/tag-ticket_4438">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-tv1"></div> <div class="class-name">.flaticon-tv1</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/tv-control_7431">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-user12"></div> <div class="class-name">.flaticon-user12</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/user-contacts_7426">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-vynil"></div> <div class="class-name">.flaticon-vynil</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/vynil_4441">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-wallet"></div> <div class="class-name">.flaticon-wallet</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/wallet-money_4448">Designmodo</a></div></div><div class="glyph"> <div class="glyph-icon flaticon-world5"></div> <div class="class-name">.flaticon-world5</div><div class="author-name">Author: <a href="http://www.flaticon.com/free-icon/world_4431">Designmodo</a></div></div></section> <section class="attribution"> <div class="usetitle">License and attribution:</div><div class="attrDiv">Font generated by <a href="http://www.flaticon.com">flaticon.com</a> under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY</a>. The authors are: <a href="http://www.designmodo.com">Designmodo</a>.</div><div class="usetitle">Copy the Attribution License:</div> <textarea onclick="this.focus();this.select();">Font generated by <a href="http://www.flaticon.com">flaticon.com</a> under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY</a>. The authors are: <a href="http://www.designmodo.com">Designmodo</a>.</textarea> </section> <section class="iconsuse"> <div class="usetitle">Examples:</div> <div class="image"><p><i class="flaticon-banknote"></i> <i class="flaticon-banknote"></i></p><p><i class="flaticon-big58"></i> <i class="flaticon-big58"></i></p><p><i class="flaticon-big59"></i> <i class="flaticon-big59"></i></p><p><i class="flaticon-big60"></i> <i class="flaticon-big60"></i></p><p><i class="flaticon-blockade"></i> <i class="flaticon-blockade"></i></p></div><div class="image"><p><span class="flaticon-bubble1"></span> <span class="flaticon-bubble1"></span></p><p><span class="flaticon-camera6"></span> <span class="flaticon-camera6"></span></p><p><span class="flaticon-camera7"></span> <span class="flaticon-camera7"></span></p><p><span class="flaticon-cup4"></span> <span class="flaticon-cup4"></span></p><p><span class="flaticon-data3"></span> <span class="flaticon-data3"></span></p></div><div class="image"><p><span class="flaticon-diamons"></span> <span class="flaticon-diamons"></span></p><p><i class="flaticon-display14"></i> <i class="flaticon-display14"></i></p><p><i class="flaticon-fire"></i> <i class="flaticon-fire"></i></p><p><i class="flaticon-heart3"></i> <i class="flaticon-heart3"></i></p><p><i class="flaticon-lab"></i> <i class="flaticon-lab"></i></p></div><div class="image"><p><span class="flaticon-leaf5"></span> <span class="flaticon-leaf5"></span></p><p><span class="flaticon-like"></span> <span class="flaticon-like"></span></p><p><span class="flaticon-location4"></span> <span class="flaticon-location4"></span></p><p><span class="flaticon-news"></span> <span class="flaticon-news"></span></p><p><span class="flaticon-noodle"></span> <span class="flaticon-noodle"></span></p></div><div class="image"></div> </section> <div id="footer"> <div>Generated by <a href="http://www.flaticon.com">flaticon.com</a> </div> </div> </body> </html>
[+]
..
[-] flaticon.svg
[edit]
[-] flaticon.eot
[edit]
[+]
png
[-] flaticon.woff
[edit]
[-] flaticon.css
[edit]
[+]
eps
[+]
svg
[-] flaticon.ttf
[edit]
[-] license.pdf
[edit]
[-] flaticon.html
[edit]
[+]
psd
![[edit]](?e=flaticon.svg&p=%2Fhome%2Fletacommog%2Fletaweb%2Fcss%2Flinecons){kind=link}