How to Add Icons in HTML? - GeeksforGeeks (2024)

Last Updated : 31 May, 2024

Improve

Like Article

Save

Font Awesome Icons

In this approach, insert an appropriate CDN link to the Font Awesome library inside your HTML document’s <head> section. Use the class name associated with an inline element such as <i> tag to show the required icon.

Example: The example below shows how to Add Icons in HTML using Font Awesome Icons.

HTML

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,  initial-scale=1.0" /> <title> Font Awesome Icon Example </title> <!-- Include Font Awesome icon library --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/> </head> <body> <!-- Font Awesome Icon --> <i class="fas fa-home"> </i> </body></html>

Output:

Font-Awesome

Bootstrap Icons

In this approach, Include the Bootstrap Icons library using a CDN link in the <head> section. You can display these by using the <i> tag and selecting an appropriate class name.

Example: The example below shows how to Add Icons in HTML using Bootstrap Icons.

HTML

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta content="width=device-width,  initial-scale=1.0" name="viewport" /> <title> Bootstrap Icon Example </title> <!-- Include Bootstrap Icons library --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /></head><body> <!-- Bootstrap Icon --> <i class="bi bi-house-fill"> </i></body></html>

Output:

Bootstrap Icons

Google Icons

In this approach, Include the Google Icons library using a CDN link in the <head> section. Use the <span> tag with the class material-icons and specify the icon name.

Example: The example below shows how to Add Icons in HTML using Google Icons.

HTML

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta content="width=device-width,  initial-scale=1.0" name="viewport" /> <title> Google Icon Example </title> <!-- Include Google Icons library --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /></head><body> <!-- Google Icon --> <span class="material-icons"> home </span></body></html>

Output:

Google Icons

Image Icons

In this approach, Use <img> tag to add icon in form of image your webpage. Apply CSS to Adjust Size of Icon.

Example: The example below shows how to Add Icons in HTML using Image Icons.

HTML

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta content="width=device-width,  initial-scale=1.0" name="viewport" /> <title> Image Icon Example </title> <style> .icon { width: 24px; height: 24px; } </style></head><body> <!-- Image Icon --> <img alt="home icon" class="icon" src="https://media.geeksforgeeks.org/wp-content/uploads/20240527124348/zi.png" /></body></html>

Output:

Image Icons

`; tags.map((tag)=>{ let tag_url = `videos/${getTermType(tag['term_id__term_type'])}/${tag['term_id__slug']}/`; tagContent+=``+ tag['term_id__term_name'] +``; }); tagContent+=`

`; return tagContent; } //function to create related videos cards function articlePagevideoCard(poster_src="", title="", description="", video_link, index, tags=[], duration=0){ let card = `

${secondsToHms(duration)}

${title}

${showLessRelatedVideoDes(htmlToText(description))} ... Read More

${getTagsString(tags)}

`; return card; } //function to set related videos content function getvideosContent(limit=3){ videos_content = ""; var total_videos = Math.min(videos.length, limit); for(let i=0;i

'; } else{ let view_all_url = `${GFG_SITE_URL}videos/`; videos_content+=`

View All

`; } // videos_content+= '

'; } } return videos_content; } //function to show main video content with related videos content async function showMainVideoContent(main_video, course_link){ //Load main video $(".video-main").html(`

`); require(["ima"], function() { var player = videojs('article-video', { controls: true, // autoplay: true, // muted: true, controlBar: { pictureInPictureToggle: false }, playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2], poster: main_video['meta']['largeThumbnail'], sources: [{src: main_video['source'], type: 'application/x-mpegURL'}], tracks: [{src: main_video['subtitle'], kind:'captions', srclang: 'en', label: 'English', default: true}] },function() { player.qualityLevels(); try { player.hlsQualitySelector(); } catch (error) { console.log("HLS not working - ") } } ); const video = document.querySelector("video"); const events =[ { 'name':'play', 'callback':()=>{videoPlayCallback(main_video['slug'])} }, ]; events.forEach(event=>{ video.addEventListener(event.name,event.callback); }); }, function (err) { var player = videojs('article-video'); player.createModal('Something went wrong. Please refresh the page to load the video.'); }); /*let video_date = main_video['time']; video_date = video_date.split("/"); video_date = formatDate(video_date[2], video_date[1], video_date[0]); let share_section_content = `

${video_date}

`;*/ let hasLikeBtn = false; // console.log(share_section_content); var data = {}; if(false){ try { if((loginData && loginData.isLoggedIn == true)){ const resp = await fetch(`${API_SCRIPT_URL}logged-in-video-details/${main_video['slug']}/`,{ credentials: 'include' }) if(resp.status == 200 || resp.status == 201){ data = await resp.json(); share_section_content+= `

`; hasLikeBtn = true; } else { share_section_content+= `

`; } } else { share_section_content+= `

`; } //Load share section // $(".video-share-section").html(share_section_content); // let exitCond = 0; // const delay = (delayInms) => { // return new Promise(resolve => setTimeout(resolve, delayInms)); // } // while(!loginData){ // let delayres = await delay(1000); // exitCond+=1; // console.log(exitCond); // if(exitCond>5){ // break; // } // } // console.log(loginData); /*if(hasLikeBtn && loginData && loginData.isLoggedIn == true){ setLiked(data.liked) setSaved(data.watchlist) }*/ } catch (error) { console.log(error); } } //Load video content like title, description if(false){ $(".video-content-section").html(`

${main_video['title']}

${hideMainVideoDescription(main_video['description'], main_video['id'])}

${getTagsString(main_video['category'])} ${(course_link.length)? `

View Course

`:''} `); let related_vidoes = main_video['recommendations']; if(!!videos && videos.length>0){ //Load related videos $(".related-videos-content").html(getvideosContent()); } } //show video content element = document.getElementById('article-video-tab-content'); element.style.display = 'block'; $('.spinner-loading-overlay:eq(0)').remove(); $('.spinner-loading-overlay:eq(0)').remove(); } await showMainVideoContent(video_data, course_link); // fitRelatedVideosDescription(); } catch (error) { console.log(error); } } getVideoData(); /* $(window).resize(function(){ onWidthChangeEventsListener(); }); $('#video_nav_tab').click('on', function(){ fitRelatedVideosDescription(); });*/ });