HOW TO ADD ICONS IN HTML CSS

[{"selector":"#anim-3871f940-4afb-4d53-9b56-96d89c449146","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d6a3a778-cad0-4d10-8850-b47a5357ba1d","keyframes":{"transform":["translate3d(0px, 146.92672%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-512d4359-3765-49b4-83f4-6c9a8d7374b0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc4b9bbf-76bb-4d73-8faf-01eb3afe9695","keyframes":{"transform":["translate3d(0px, -1303.49223%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5c43d705-82a4-4d5d-abdc-8b6faa6358fd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e9b30cf7-8360-4894-ab87-8a7ae8e2530c","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (quick & simple examples)

HTML SYMBOLS

[{"selector":"#anim-25ffbd7c-e31c-4a5a-baf1-a1970c077e12","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d25e70bd-0f86-478e-b4b8-c98b0238c57a","keyframes":{"transform":["translate3d(-114.77988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-59bb2845-6ed4-47a4-a21c-14e713eab588","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9b1c45d9-b7cf-45e4-8211-66b1a42208d8","keyframes":{"transform":["translate3d(-115.4088%, 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

ICON IMAGE

[{"selector":"#anim-2ab411df-4b21-4178-a783-8fbdf2cccc39","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bced5146-cbff-4082-9b1f-62946bdcf95b","keyframes":{"transform":["translate3d(114.92064%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4e126c77-a65c-42a9-938f-0576654fe118","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fe513ede-7090-47b6-aa03-724cb5a31740","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"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">

FONT ICON SET

[{"selector":"#anim-b9eb4212-2d06-423f-a915-b4fee5a76d01","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e2abff16-a001-468b-bc69-6f957fdbdadf","keyframes":{"transform":["translate3d(-114.77988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1eac31ce-45f8-4c02-8403-2be63b1e1408","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-765b842c-f0f5-4ca6-baaa-38a48d0feb68","keyframes":{"transform":["translate3d(136.19403%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <style> @font-face { font-family: Heydings; src: url(heydings_icons.ttf); } .icon { font-family: Heydings; } </style> ABCDEF Check out more icon fonts

ICON LIBRARIES

[{"selector":"#anim-5b7cb55c-3d9e-480a-8f45-076e95100672","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ca92443a-50c0-4965-a49b-8fc596371998","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-71603fcc-ee93-4d0b-81cc-51166c375878","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db668db8-c493-42a8-831d-69e43e6b1194","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-75423c5d-f8e3-4739-b96c-3983e5aa0de9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1532b0f1-a3f1-4e65-8d3f-dfcf6eba7787","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8d5a321e-8d9c-492b-98fa-fb08cc267d6f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b1044c28-3e31-4de4-bff5-0f17869468f7","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] LOAD FONT AWESOME FROM A CDN OR GOOGLE MATERIAL ICONS icecream restaurant

VISIT & FOLLOW

[{"selector":"#anim-af1e080f-7448-45ed-bd14-fd0d7bb95cbb","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bcaaa5ec-a42b-41d7-817c-c4f6dd63384f","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09143ba2-5399-42c0-8b8e-be14a1440622","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-939adad3-a018-4126-b5c1-ee3903196976","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-246a9e81-6d91-4f59-b72a-b9921fc4143c","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7ca77d31-fc7e-49af-afc5-7bc02e1d613c","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c115b176-6539-4a4b-b56a-0c5a29d77832","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0ee51cec-382a-47a3-b5c7-1e8418e0d1d2","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4d933987-19fd-487b-be56-ac42109ad77c","keyframes":{"transform":["translate3d(-170.2941%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3ed3266d-4429-431c-9c5d-28844e1f8474 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(5.4032124014701175%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

HOW TO ADD ICONS IN HTML CSS

HTML SYMBOLS

01

ICON IMAGE

02

FONT ICON SET

03

ICON LIBRARIES

04

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL