HOW TO ADD ICONS IN HTML CSS

[{"selector":"#anim-d3a39dfb-a48f-4636-a143-4d08b9640378","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0695642c-06a3-43c4-adaa-25a6ba1bc2b3","keyframes":{"transform":["translate3d(0px, 138.94801%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-97adef51-5387-473f-82a1-b18cbb6688bb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-452a81bd-4e0e-4bd6-b2af-ab918a5fab91","keyframes":{"transform":["translate3d(0px, -1346.3493%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-232aee8a-c4da-490e-99aa-74630faae0a4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-491396d5-4ff2-40d3-8dd5-327c11840e77","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-4192a89c-577e-46d3-915f-45e44d095615","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8f113125-74d7-44c7-9b83-f9470649809a","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-17908e6c-d64e-4e08-8a74-9ddbe03a95eb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8dd05b07-3537-4822-a03b-4efe9003579b","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-5c2cb024-1b03-4959-bcdf-5ad9bc827f48","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e416e0e8-f517-40c7-bce7-c4de5180ca80","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-d09e94e6-2f81-49b3-8c0c-f99cf12c37fd","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-479cf8bc-3ed2-42a2-b9c5-ec0fa88744a6","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-4dc420b0-12f1-47ce-b55b-0c9852b025e6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6d13700b-ed96-4f15-88f9-1d8a0a5def33","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-b96629e6-94b6-4c6b-8aeb-2d7b2ed8a20b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-265fafff-ad51-4c18-9370-2b1e5cd14947","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-fd4bb0bb-2ff2-42fa-8c1d-dad3ede96aa4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-be6a511c-fa64-4271-9ab6-da8688a5f4d2","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-0ebd8694-9633-44ab-8ca6-657acd85869d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a536c74a-6434-41f7-93bd-95f5cdb3fcd4","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-9d962430-2ace-41b1-8430-d91e00c2b759","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-02a30e7a-36e0-4f85-a895-35ad4e7dcbf6","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-7de189a8-1f5b-4c9f-b6e2-b1ed1e1927c6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4d0e9e92-0335-4ad6-aaf6-826f1e4aa5a8","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-d64bf223-f212-4bb9-a776-0f16510785e1","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6b46e4d2-c933-4dbb-a8bd-5974c9b4cad1","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-96b1fa60-67d7-4ef6-8425-93676d313c55","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-b06daf72-e5d5-4596-bb2a-27f6ce7d0441","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-896fc2c6-6b56-4879-8880-f37e349d9e50","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-689923b8-4715-409f-bcfb-250ad5c162fe","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7de27fa2-7c28-4560-ad22-fa82d3925ec1","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-8c45c8a1-64fa-48d0-9498-1bfa84166f22","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-47f51d5a-6848-40ed-95fe-c48a7848f0ce","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-4dcda399-9ad5-4a3c-890e-3f211a7244e1 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 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