How To Add Icons In HTML CSS

[{"selector":"#anim-18e2669e-686a-4deb-8e03-1024c616b6b9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9eb4dc28-d897-4a51-a4e7-38d7ee3308ce","keyframes":{"transform":["translate3d(0px, 211.28843%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a31a30e2-6fcd-487c-abb4-b8c410fcdf01","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-31ae1572-4892-4fc6-bc63-e43b1ffce0f4","keyframes":{"transform":["translate3d(0px, -803.49205%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS HOW TO ADD ICONS IN HTML CSS

[{"selector":"#anim-0117eebd-7a11-4dfb-87b9-6d46cb6bcd6c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a60aa45e-7bfa-494c-a98f-e5dff0350573","keyframes":{"transform":["translate3d(-120.98215%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-afcd27e6-012d-4a83-8dea-a75fab2e0c1b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eef9536e-bc8e-49fa-b4df-7dc858947350","keyframes":{"transform":["translate3d(162.94643%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] &#9733; STAR! &#9730; Weather report. &#9731; Snowman. List of HTML Symbols HTML SYMBOLS 01

[{"selector":"#anim-8a0a8c6d-0a29-444c-a9a3-60e709c2cab3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-82a58c40-62ac-468c-8ed7-c5a95e62b0ac","keyframes":{"transform":["translate3d(-117.0418%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-565f0efb-1a86-47a8-a74e-707aae60637a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f75fcc70-e8f0-4818-9763-2245ce1fc011","keyframes":{"transform":["translate3d(0px, 717.12967%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Get icons from sites such as flaticon.com <img src="ICON.PNG"/> ICON IMAGE 02

[{"selector":"#anim-56b7ca64-5f5a-442c-8526-f9e2bc9e335c","keyframes":{"transform":["translate3d(-114.77988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd1ad730-97fe-4cb0-b36d-dd0273ed515f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b315aef-50f7-426e-ad2b-bc6a3be443eb","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-3533ecd8-fcd7-4253-89e3-13b859506378","keyframes":{"transform":["translate3d(-117.53732%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5c2a892e-afdb-4ee9-b613-bdc329f63d63","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-29e85035-81e5-4fc6-aca2-5dc935b91444","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] <style> @font-face { font-family: Heydings; src: url(heydings_icons.ttf); } .icon { font-family: Heydings; } </style> ABCDEF Check out more icon fonts FONT ICON SET 03

[{"selector":"#anim-e2de2d40-4b2a-4a31-b85f-26719c15ff9d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7f1bc666-50aa-4785-8f22-2279cb182467","keyframes":{"transform":["translate3d(-116.10739%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3ac57d5f-b5f1-4598-9a1b-91d706359aeb","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c317a0a9-939a-4ecc-b15e-f207e84fea74","keyframes":{"transform":["translate3d(-116.10739%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-41d4ebc6-26a7-4e83-b6a2-8f9a3a572175","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96f4b2ee-6268-4090-a3ec-39cf56da09c9","keyframes":{"transform":["translate3d(121.81208%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-edfac5cd-df5f-4e41-9678-30d75c3d1ee2","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9e0be172-7ecb-4f03-bf89-c5f5ed322b74","keyframes":{"transform":["translate3d(121.81208%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] LOAD FONT AWESOME FROM A CDN ICON LIBRARIES 04 OR GOOGLE MATERIAL ICONS icecream restaurant

[{"selector":"#anim-7e1a547f-f549-4e3a-9473-f5ab3b169b18","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-4bcde51e-6798-4b9f-9ea8-be9e99a0b14f","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-5507a60e-c91a-49c4-b890-dd2e8d46f64b","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] FULL TUTORIAL VISIT & FOLLOW CODE BOXX YOUTUBE CODE BOXX PINTEREST