Font Awesome not all icons showing - html

I'm using font awesome CDN to use the icons but not all icon do show, i put 2 examples of 2 icons, the first one shows and the second does not, it rather shows as an X inside a square, what is going on ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alarabiyah | Breaking News From Around The World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-
xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<div class="header__top">
<div class="header__top-logo-container">
<img src="logo.png" alt="logo" class="header__top-logo-image" />
</div>
<div class="header__top-controls">
<i class="fa-solid fa-magnifying-glass"></i> // SHOW
<i class="fa-regular fa-magnifying-glass"></i> // SHOWS AS AN X INSIDE A SQUARE
<div class="header__top-theme"></div>
</div>
</div>
</header>
</body>
</html>
i have tried using different CDNs, i've also used the Font Awesome Kit, but it doesn't change anything

It is because "fa-regular fa-magnifying-glass" is not free. You can check this out using below link:
Font awesome free icons

Related

tailwind css is not working in my threejs website

I am using threejs website with webpack and to style my website I am using Tailwind CSS and I tried to configure it and this not working in my browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" >
<title>Globe animation</title>
</head>
<body>
<div class="flex">
<div class="w-1/2">
<h1>Globe</h1>
</div>
<div class="w-1/2" id="canvasContainer">
<!-- Threejs canvas globe -->
<canvas class="webgl"></canvas>
</div>
</div>
</body>
</html>

Text is overflowing when using Bootstrap Grid

I'm trying to make a display heading with an image to the left and to the right of the heading. It works great om lg-display but when i make the display smaller the heading text seems to overflow the column to the right making it asymetrical. I would like the images and the text to stay even with smaller screens. Am I doing something wrong with the grid system?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="display-4 text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
I assume you want the text to always fit in the middle div, one way you can achieve this is using vw for length instead of rem
rem:
Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
vw:
Equal to 1% of the width of the viewport's initial containing block.
Check length for more info on this.Final result would be:
.heading {
font-size: 5vw;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>farfetch'd | Official Website ‐</title>
<!--CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link href="https://fonts.googleapis.com/css2?family=Archivo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- favicon -->
<link rel="icon" href="Images\Logo-feather-without-stroke.png">
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col">
<img class="float-right" src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
<div class="col">
<h1 class="heading text-center">farfetch'd</h1>
</div>
<div class="col">
<img src="https://placekitten.com/100/100" alt="feather" style="width:100px">
</div>
</div>
</div>
</body>
i think this is the default behavior of h1 tag
you can change this behavior with overflow-wrap overflow , etc in css

UrlFetchApp is not return full source code

If I try to simply get the source html of a page I cannot get the full source. It breaks in some point. Returns less than half of the exact source html.
var pagedata = UrlFetchApp.fetch("https://stackoverflow.com");
var html = pagedata.getContentText();
Logger.log(html);
returns:
[20-01-06 11:37:12:483 AST] <!DOCTYPE html>
<html class="html__responsive html__unpinned-leftnav">
<head>
<title>Stack Overflow - Where Developers Learn, Share, & Build Careers</title>
<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d">
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
<link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
<meta name="description" content="Stack Overflow is the largest, most trusted online community for developers to learn, share​ ​their programming ​knowledge, and build their careers."/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<meta property="og:type" content= "website" />
<meta property="og:url" content="https://stackoverflow.com/"/>
<meta property="og:site_name" content="Stack Overflow" />
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:domain" content="stackoverflow.com"/>
<meta name="twitter:title" property="og:title" itemprop="name" content="Stack Overflow - Where Developers Learn, Share, & Build Careers" />
<meta name="twitter:description" property="og:description" itemprop="description" content="Stack Overflow | The World’s Largest Online Community for Developers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.sstatic.net/Js/stub.en.js?v=805608b6266c"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=d0797a2dd6f2" >
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=b556f32ececa" >
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/Product/product.css?v=b21a396b1289" >
<link rel="alternate" type="application/atom+xml" title="Feed of recent questions" href="/feeds">
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/Channels/channels.css?v=05e29db3ebd2" >
<script>
StackExchange.init({"locale":"en","serverTime":1578299832,"routeName":"Home/Index","stackAuthUrl":"https://stackauth.com","networkMetaHostname":"meta.stackexchange.com","site":{"name":"Stack Overflow","description":"Q&A for professional and enthusiast programmers","isNoticesTabEnabled":true,"enableNewTagCreationWarning":true,"insertSpaceAfterNameTabCompletion":false,"id":1,"childUrl":"https://meta.stackoverflow.com","negativeVoteScoreFloor":null,"enableSocialMediaInSharePopup":true,"protocol":"https"},"user":{"fkey":"57ec692c216f7cb3d5bad86dceda031ede043f08f80e49d7b3a503d818751da0","tid":"0e7426d0-71e0-4546-1387-57279d43b924","rep":0,"isAnonymous":true,"isAnonymousNetworkWide":true},"events":{"postType":{"question":1},"postEditionSection":{"title":1,"body":2,"tags":3}},"story":{"minCompleteBodyLength":75,"likedTagsMaxLength":300,"dislikedTagsMaxLength":300},"jobPreferences":{"maxNumDeveloperRoles":2,"maxNumIndustries":4},"svgIconPath":"https://cdn.sstatic.net/Img/svg-icons","svgIconHash":"53ac0f6119d0"}, {"userProfile":{"openGraphAPIKey":"4a307e43-b625-49bb-af15-ffadf2bda017"},"userMessaging":{},"tags":{},"snippets":{"renderDomain":"stacksnippets.net","snippetsEnabled":true},"slack":{"sidebarAdDismissCookie":"slack-sidebar-ad"},"site":{"allowImageUploads":true,"enableImgurHttps":true,"enableUserHovercards":true,"forceHttpsImages":true,"styleCode":true},"questions":{"showPostNoticesV2":true},"paths":{},"monitoring":{"clientTimingsAbsoluteTimeout":30000,"clientTimingsDebounceTimeout":1000},"mentions":{"maxNumUsersInDropdown":50},"markdown":{"asteriskIntraWordEmphasis":true},"flags":{"allowRetractingCommentFlags":true,"allowRetractingFlags":true},"comments":{},"accounts":{"currentPasswordRequiredForChangingStackIdPassword":true}});
StackExchange.using.setCacheBreakers({"js/prettify-full.en.js":"e75c65979e48","js/moderator.en.js":"b6ce25c91468","js/full-anon.en.js":"bcefec08f832","js/full.en.js":"bf88016bdeb3","js/wmd.en.js":"28e8cee04c52","js/mobile.en.js":"a168d277c579","js/help.en.js":"373025d0518f","js/tageditor.en.js":"693662f7ff37","js/tageditornew.en.js":"803d1cb2516d","js/inline-tag-editing.en.js":"b5436857e5dd","js/revisions.en.js":"055fbe1202e9","js/review.en.js":"7b6845367497","js/tagsuggestions.en.js":"dba299567acf","js/post-validation.en.js":"bc3e5be5330d","js/explore-qlist.en.js":"8498d0bb288b","js/events.en.js":"57fa0feb2feb","js/keyboard-shortcuts.en.js":"ab1fdc223933","js/adops.en.js":"6b9883f0531e","js/begin-edit-event.en.js":"cb9965ad8784","js/ask.en.js":"e4dd8c66240e","js/question-editor.en.js":"","js/snippet-javascript-codemirror.en.js":"07eb23cd1f61"});
StackExchange.using("gps", function() {
StackExchange.gps.init(true);
});
</script>
<noscript id="noscript-css"><style>body,.top-bar{margin-top:1.9em}</style></noscript>
</head>
<body class="home-page unified-theme">
<div id="notify-container"></div>
<div id="custom-header"></div>
<header class="top-bar js-top-bar top-bar__network _fixed">
<div class="wmx12 mx-auto grid ai-center h100" role="menubar">
<div class="-main grid--cell">
<span class="ps-relative"></span>
<div class="topbar-dialog leftnav-dialog js-leftnav-dialog dno">
<div class="left-sidebar js-unpinned-left-sidebar" data-can-be="left-sidebar" data-is-here-when="sm md lg"></div>
</div>
<a href="https://stackoverflow.com" class="-logo js-gps-track"
data-gps-track="top_nav.click({is_current:true, location:1, destination:8})">
<span class="-img _glyph">Stack Overflow</span>
</a>
</div>
<ol class="list-reset grid gs4" role="presentation">
<li class="grid--cell">
<a href="#"
class="-marketing-link is-selected js-gps-track js-products-menu"
aria-controls="products-popover"
data-controller="s-popover"
data-action="s-popover#toggle"
data-s-popover-placement="bottom"
data-gps-track="top_nav.products.click({location:1, destination:1})"
data-ga="["top navigation","products menu click",null,null,null]">
Products
</a>
</li>
<li class="grid--cell md:d-none">
<a href="/teams/customers" class="-marketing-link js-gps-track"
data-gps-track="top_nav.products.click({location:1, destination:7})"
data-ga="["top navigation","customers menu click",null,null,null]">Customers</a>
</li>
<li class="grid--cell md:d-none">
<a href="/teams/use-cases" class="-marketing-link js-gps-track"
data-gps-track="top_nav.products.click({location:1, destination:8})"
data-ga="["top navigation","use cases menu click",null,null,null]">Use cases</a>
</li>
Original source has 4168 lines. First of all there is no closing body, html tags. How can I get the full source code of a page with UrlFetchApp?
The Logger.log() method expects a string or other JavaScript object. The logs can only hold a limited amount of data, so avoid logging large amounts of text.
Source
The character limit for the logger.log function is not specified, but your variable html does contain all of your data.

HTML Text not centering

I have been having a problem with my code, I wanted the text to be in the centre, but no matter what I do, it just won't go there. I have added a comment indicating the location of the text I wanted to be centred. Any help is appreciated.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mix Pics</title>
<meta name="description" content="A photography-inspired website layout with an expanding stack slider and a background image tilt effect" />
<meta name="keywords" content="photography, template, layout, effect, expand, image stack, animation, flickity, tilt" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/flickity.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="hero">
<div class="hero__back hero__back--static"></div>
<div class="hero__back hero__back--mover"></div>
<div class="hero__front"></div>
</div>
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="index.html" title="Home Page"><span>Home Page</span></a>
<a class="codrops-icon codrops-icon--drop" href="index.html" title="Home Page"><span>Home Page</span></a>
</div>
<h1 class="codrops-title">Mix <span>Pics</span></h1>
<div align="center">
<h3>About</h3> <!-- This text for some reason is in the top right hand corner, not the centre. -->
</div>
</body>

Banner image doesn't display after directory change

I have a banner header that display's its banner image when in the main directory of the site but once I move the HTML file to a sub folder and update all the links to reflect the folder change the banner image no longer displays. In all of my code editors, the path to the image is set correctly. Below you will find the code in my header and also the section of code that isn't working properly. top-banner.jpg is the question at hand here. All other images on the page work and are in the same directory as the banner image. Any suggestions would be greatly appreciated.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<meta name="description" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/flaticon.css" rel="stylesheet">
<link href="../css/fopen-sans.css" rel="stylesheet">
<link href="../css/raleway-webfont.css" rel="stylesheet">
<link href="../css/lato.css" rel="stylesheet">
<link href="../css/idangerous.swiper.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../img/favicon.ico" rel="shortcut icon">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
</head>
<div class="wpc-top-header overlay img-bg">
<img src="../img/top-banner.jpg" alt="banner" class="hidden">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="wrapper">
<div class="heading">Our Products</div>
<div class="subheding">
home<span class="round"></span>
pages<span class="round"></span>
Our Products
</div>
</div>
</div>
</div>
</div>
</div>
remove class="hidden" in <img src="../img/top-banner.jpg" alt="banner" class="hidden">
Edit: As can be seen from the provided links, the file /htmltest/js/scripts.js contains:
/*-------------------------*/
/* ADD BACKGROUND IMAGE */
/*-------------------------*/
$(".img-bg").each(function(){
$(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});
However, the path js/scripts.js is not updated to ../js/scripts.js, and this script is not executed. So just replace all js/into ../js/ in the HTML file.
Your old version adds a style into the div tag with class overlay. Its adding:
style="background-image: url("img/top-banner.jpg");"
So add that to your new <div> but obviously with the new path. That fixes it for me, so to clarify the line should now be:
<div class="wpc-top-header overlay img-bg" style="background-image: url('../img/top-banner.jpg');">