I have been tired of writing code but the icon is not shown on the Web page, I have tried changing the background still not seen.
to add fontawesome icons, you first need to make an account on https://fontawesome.com.
Once you made an account, then simply go to https://fontawesome.com/kits to make a new kit for your project. It is very easy to make a new kit on their. All you need is to just follow the instructions given by them.
Finally you will be able to see something like "Add Your Kit's Code to a Project". Copy kit code from there and paste it in the header part of your HTML file.
Here is an example of how to link it to your HTML file. (Please note that this won't display anything because this is not a valid fontawesome kit.)
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://kit.fontawesome.com/YOUR_OWN_KIT_CODE.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
</body>
</html>
Thanks and best regards!
Related
I am trying to get a spinner icon to spin with no success. I have downloaded the latest font awesome and created a very basic html file to try and eliminate any variables to make it work.
Here is the html:
<!doctype html>
<html lang="en">
<head>
<link href="C:/Users/<my-user-name>/Downloads/fontawesome-free-6.2.0-web/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col">
<i class="fa-solid fa-spinner fa-spin"></i>
</div>
</div>
</body>
</html>
The above code renders the icon but the animation doesn't work.
The only thing I have noticed is that when I inspect the icon element in chrome and look at the style details for .fa-spin, it shows a style called animation-timing-function: var(--fa-animation-timing, linear); but when I hover over that style, text appears stating "--fa-animation-timing is not defined".
As far as I can tell from the fontawesome host yourself instructions I have included everything I need. I didn't delete any files from the extracted free font awesome download. I also tried the alternative option to referencing all.css, which involves referencing fontawesome.css, brands.css and solid.css.
What am I missing here?
Thanks so much in advance!
We just ran into this issue and found the potential reason.
https://fontawesome.com/docs/web/troubleshoot/
Points to https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-reduced-motion#user_preferences
And when we toggled "Show animations in Windows." The animations started working again.
I'm a beginner, alright?
I'm trying to build an HTML page that needs social media logos. I have all the ones I need except for good reads.
https://www.goodreads.com/
I can't find how to build one in CSS. I've tried to copy the image, that doesn't work. Does anyone else know how to build a goodreads tag?
you can download a goodreads svg at Goodreads, open the file in your editor, copy the content and put it where you need it in your HTML file.
On goodreads.com, copy the image address and paste in into a new tab. If the new tab contains only the image, copy the image address again and paste it between the src tabs. Otherwise, keep copying the image address from the new pages.
Depends if you want to just put in the logo or make the logo a link to your goodreads account
For just the image you could use
<html>
<head>
<!--Put your metadata and link css here-->
</head>
<body>
<img src="https://i.stack.imgur.com/g0KBL.png" alt="Goodreads">
</body>
</html>
And for a social media link I recomend using a icons library like FontAwesome
<html>
<head>
<script src="https://kit.fontawesome.com/393a279287.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="fa fa-goodreads"></div>
</body>
</html>
Anyways good luck!
Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I created a random quote generater webpage as part of the freecodecamp curriculum and am now uploading the files to github so that they can be hosted on there as their own webpages. The page works fine in codepen but the 'buttons' don't work when I upload the page to github. I can't figure out why. I would appreciate any feedback and insight on this issue! (I'm quite new to web development and coding in general so I apologize in advance if this is a stupid/simple error) Thanks!
I'm also not sure why the font size is so small on the github version :/
page on codepen - https://codepen.io/armte312/pen/Qrvyjr
github webpage - https://armte.github.io/quotegen.github.io/
github repo - https://github.com/armte/quotegen.github.io
code with issue:
<div class="button-row" id="button-row">
<a class="button tweet-quote" href="#" id="tweet-quote"><i class="fab fa-twitter-square"></i></a>
<a class="button new-quote-btn" href="#" id="new-quote-btn">New Quote</a>
</div><!--End of button-row !-->
I tried using the z-index property because I wasn't sure if some other element may be 'in front of' the a tags but that didn't seem to work.
Also tried a more updated version of bootstrap but that didn't seem to matter either.
The 'new quote' button (an tag) should react to the cursor hovering above it and when it's clicked but it does neither...
You have your jquery set as
<script type="text/javascript" src="jquery-3.3.1.js"></script>
while you don't have that name of a file in your github repo. Use this code instead
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
Remove the duplicate
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">