icon can be created,
i) using font family
ii) using js file
iii) using html entity
iv) using css
- using awesome js - in this js all types icon available like emoji, alert, animation, social icon, media & so on.
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!--just go to above site and create own js file which is free-->
</head>
<body>
<p>Some Font Awesome icons:</p>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
- using font family
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
https://fonts.googleapis.com/icon?family=Material+Icons this is google icon
- using bootstrap - just use class name glyphicon, glyphicon-trash
<p>Trash icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-trash"></span> Trash
</button>
</p>
all above fonts works on all devices, browser, responsive, easy to load , lightweight.
No comments:
Post a Comment