-
Notifications
You must be signed in to change notification settings - Fork 2
/
flaticons.html
110 lines (90 loc) · 8.05 KB
/
flaticons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5">
<meta name="description" content="Bootstrap Extra is a free and advanced open source front end development framework for the creation of websites and web apps.">
<meta name="keywords" content="HTML, CSS, JavaScript, Responsive, Mobile, App, Jquery">
<meta name="author" content="Irfan Ghuori">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="plugin/css/fonts.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Favicon /-->
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<link rel="manifest" href="./images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Favicon \ -->
<title>Bootstrap Extra</title>
<!-- Fonts and icons -->
<style>
.demo-icon,
.icon-class {
padding: 9px;
}
.icon-preview i {
font-size: 1.3rem;
border-radius: 9px;
margin: 5px;
}
div {
display: inline;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="card-title display-4">Flaticons</div>
<div class="card-category">Flat Icons from <a class="link" target="_blank" href="https://www.flaticon.com/authors/smashicons">Smashicons</a></div>
</div>
<div class="card-body">
<div class="card-text">
<h6> Example </h6>
<pre>
<code>
<div>
Add Style Sheet:
<link rel="stylesheet" href="plugin/css/fonts.min.css">
</div>
Use icon:
<i class="la flaticon-shopping-bag"></i>
</code>
</pre>
</div>
<div id="row-demo-icon" class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
var iconClass = ['flaticon-delivery-truck', 'flaticon-shopping-bag', 'flaticon-box-3', 'flaticon-box-2', 'flaticon-box-1', 'flaticon-laptop', 'flaticon-coffee-cup', 'flaticon-user-6', 'flaticon-user-5', 'flaticon-remove-user-1', 'flaticon-customer-support', 'flaticon-user-4', 'flaticon-user-3', 'flaticon-user-2', 'flaticon-remove-user', 'flaticon-add-user', 'flaticon-tea-cup', 'flaticon-pen', 'flaticon-desk', 'flaticon-ruler', 'flaticon-pencil', 'flaticon-analytics', 'flaticon-google-plus', 'flaticon-dribbble', 'flaticon-whatsapp', 'flaticon-twitter', 'flaticon-behance', 'flaticon-instagram', 'flaticon-android', 'flaticon-apple', 'flaticon-windows', 'flaticon-pinterest', 'flaticon-youtube', 'flaticon-paypal', 'flaticon-linkedin', 'flaticon-facebook', 'flaticon-lock-1', 'flaticon-lock', 'flaticon-profile-1', 'flaticon-profile', 'flaticon-user-1', 'flaticon-user', 'flaticon-users', 'flaticon-message', 'flaticon-placeholder-1', 'flaticon-location', 'flaticon-arrows-2', 'flaticon-technology-2', 'flaticon-multimedia-2', 'flaticon-multimedia-1', 'flaticon-close', 'flaticon-home', 'flaticon-circle', 'flaticon-arrow', 'flaticon-mark-1', 'flaticon-mark', 'flaticon-shapes-1', 'flaticon-search-2', 'flaticon-interface-7', 'flaticon-suitcase', 'flaticon-chain-1', 'flaticon-chain', 'flaticon-agenda-1', 'flaticon-interface-6', 'flaticon-calendar', 'flaticon-list', 'flaticon-file-1', 'flaticon-file', 'flaticon-interface-5', 'flaticon-folder', 'flaticon-stopwatch', 'flaticon-time', 'flaticon-clock-1', 'flaticon-search-1', 'flaticon-alarm-1', 'flaticon-alarm', 'flaticon-present', 'flaticon-layers-1', 'flaticon-settings', 'flaticon-attachment', 'flaticon-gestures', 'flaticon-tool', 'flaticon-interface-4', 'flaticon-interface-3', 'flaticon-agenda', 'flaticon-shapes', 'flaticon-symbol-1', 'flaticon-symbol', 'flaticon-interface-2', 'flaticon-layers', 'flaticon-clock', 'flaticon-web-1', 'flaticon-internet', 'flaticon-placeholder', 'flaticon-signs-3', 'flaticon-star-1', 'flaticon-web', 'flaticon-star', 'flaticon-like-1', 'flaticon-like', 'flaticon-cloud', 'flaticon-database', 'flaticon-technology-1', 'flaticon-idea', 'flaticon-search', 'flaticon-wifi', 'flaticon-hands-1', 'flaticon-hands', 'flaticon-bars-2', 'flaticon-arrows-1', 'flaticon-interface-1', 'flaticon-network', 'flaticon-share-1', 'flaticon-share', 'flaticon-bars-1', 'flaticon-cross-1', 'flaticon-line-1', 'flaticon-signs-2', 'flaticon-check', 'flaticon-technology', 'flaticon-bars', 'flaticon-cross', 'flaticon-add', 'flaticon-power', 'flaticon-signs-1', 'flaticon-round', 'flaticon-exclamation', 'flaticon-success', 'flaticon-error', 'flaticon-line', 'flaticon-plus', 'flaticon-interface', 'flaticon-signs', 'flaticon-play-button-1', 'flaticon-play-button', 'flaticon-music-player', 'flaticon-medical', 'flaticon-photo-camera', 'flaticon-picture', 'flaticon-multimedia', 'flaticon-game-controller', 'flaticon-imac', 'flaticon-paint-palette', 'flaticon-envelope-3', 'flaticon-envelope-2', 'flaticon-envelope-1', 'flaticon-envelope', 'flaticon-mailbox', 'flaticon-inbox', 'flaticon-chat-8', 'flaticon-chat-7', 'flaticon-chat-6', 'flaticon-chat-5', 'flaticon-chat-4', 'flaticon-chat-3', 'flaticon-chat-2', 'flaticon-chat-1', 'flaticon-chat', 'flaticon-archive', 'flaticon-diagram', 'flaticon-graph-2', 'flaticon-graph-1', 'flaticon-graph', 'flaticon-chart-pie', 'flaticon-presentation', 'flaticon-store', 'flaticon-coins', 'flaticon-credit-card-1', 'flaticon-credit-card', 'flaticon-cart-1', 'flaticon-cart', 'flaticon-price-tag', 'flaticon-box', 'flaticon-right-arrow-4', 'flaticon-left-arrow-4', 'flaticon-up-arrow-3', 'flaticon-download-1', 'flaticon-down-arrow-3', 'flaticon-up-arrow-2', 'flaticon-left-arrow-3', 'flaticon-right-arrow-3', 'flaticon-down-arrow-2', 'flaticon-arrows', 'flaticon-left-arrow-2', 'flaticon-right-arrow-2', 'flaticon-upward', 'flaticon-download', 'flaticon-back', 'flaticon-next', 'flaticon-up-arrow-1', 'flaticon-down-arrow-1', 'flaticon-left-arrow-1', 'flaticon-right-arrow-1', 'flaticon-up-arrow', 'flaticon-down-arrow', 'flaticon-left-arrow', 'flaticon-right-arrow', 'flaticon-expand', 'flaticon-repeat'];
var rowDemoIcon = "#row-demo-icon";
for (i = 0; i < iconClass.length; i++) {
$(rowDemoIcon).append('<div class="col-md-3"> <div class="demo-icon"> <div class="icon-preview"><i class="la ' + iconClass[i] + '"></i></div> <div class="icon-class">' + iconClass[i] + '</div> </div> </div>');
}
</script>
</body>
</html>