I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>
Related
I have just started making a website and wish to include multiple fonts. I'm new to HTML and CSS and don't quite get how they interact. When looking up a tutorial for how to do so, it shows only HTML, despite explicitly saying CSS.
The W3Schools tutorial I am currently using shows this:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Doesn't the header define this as an HTML file? How does CSS play into this?
The style tag (a.k.a. what you are mentioning) specifically allows CSS to be embed into a HTML document. It can use any CSS, as long as it is encapsulated within the tag.
<style>
body {
background-color: #333;
}
</style>
This is different from the linking of a external CSS file which uses the link element:
<link rel="stylesheet" href="./styles.css">
However, you can also use the style attribute to add styles to an individual element on its tag's HTML.
Google
For the relationship between the two, HTML (Hyper Text Markup Language) is the basic blueprint / building blocks for the page and the structure it should be rendered in, while CSS (Cascading Style Sheets) describes what the page should look like. They are tightly knit and are meant to be used together. That is why the style tag specifically includes CSS in HTML. You can include both CSS and JavaScript in HTML or you can link them through external files.
Everything between the tags <style>and </style> is the css here.
There are other ways to integrate css.
You can attach a style directly to an html element:
<p style="text-align: center; color: green;">
this paragraph will be centered and green
</p>
Or you can write your styles into an extra textfile and link to this file in the header of your page
<head>
<link rel="stylesheet" href="stylesheet.css">
...
</head>
I am working on my first ever media query for a class and to me my code looks like the example we were given, but when I test it on Chrome using the developer tools, it is not responsive. I am just trying to make it so that the list will be vertical (block) when viewed on a phone and horizontal (inline block) when viewed on a bigger screen. Can anyone help me see what I did wrong?
body {
font-family: 'Ruslan Display';
}
ul {
background: #3399ff;
padding: 20px;
}
#favorites li {
background: #cce5ff;
margin: 5px;
list-style: none;
display: block;
}
#media(min-width:375px;
) {
#favorites li {
display: inline;
}
}
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Hanalei+Fill|Ruslan+Display" rel="stylesheet">
<meta charset="utf-8">
<meta name="description" content="My First Site for Web Fundamentals">
<title>My First Webpage</title>
</head>
<body>
<p>This is my very first attempt at putting info up on a Webpage using a a media query for responsive design. <br></p>
<p>Below is a list of my favorite people. It should change format based on whether or not you view it on an iPhone or a desktop.</p>
<ul id="favorites">
<li>My husband, Brian</li>
<li>My kids, Louis and Brady</li>
<li>My parents, Terry and Steve</li>
<li>My brother, Steven</li>
<li>My best friend, Missy</li>
</ul>
</body>
Remove the semi-colon from your media query param; this is invalidating your query.
#media(min-width:375px;)
should be
#media(min-width:375px)
When I tried to put your html into the snippet, there were html errors highlighted in red. You had break tags (<br>with forward slashes (</br>) that were being picked up as incorrect (the forward slashes are unnecessary). Also, the closing paragraph tag wasn't being recognised as being matched (that may be a shortcoming of stacksnippets, but still, it's good to close a paragraph after a block of text instead of using multiple br tags). The HTML errors probably contributed more to your issue than your css. The online w3c validator is a very useful tool for checking for html errors.. just a tip! .
Hope this helps
I've double checked my syntax for linking the CSS file in the of my HTML file, and it all looks correct to me. And when I view the page source of my HTML page, it does indeed to be linking correctly to the CSS page. But none of the styling seems to be showing up. I'm fairly certain that the linking of the CSS file is fine, but I can't understand why none of the changes are appearing.
HTML FILE:
<!DOCTYPE html>
<html>
<head>
<!--title to appear on the tab of the browser-->
<title>Midterm: Hangman</title>
<!--linking a CSS style sheet for the page-->
<link rel="stylesheet" type="type/css" href="hangman.css">
<!--running the hangman game-->
<script src="hangman.js"></script>
</head>
<!--run the main function from the javascript file when page is loaded-->
<body onload="javascript:hideWord()">
<!--adding a title that will appear on the webpage-->
<h1>Hangman</h1>
<!--create a text box, restrict to only one letter being able to be typed, create placeholder text-->
<input id="guessedLetter" type="text" maxlength="1" minlength="1" placeholder="Guess a letter" />
<!--create a button to submit guessed letter and run the compareLetter function when clicked-->
<button type="button" onclick="javascript:compareLetter()">Guess!</button>
<button type="button" onclick="javascript:hideWord()">Restart</button>
<!--underscores to hide the word that the player is guessing-->
<div id="hiddenWord"></div>
<!--a counter to keep track of number of player attempts-->
<p id="counter"></p>
<!--add instructions for the player-->
<h2>Instructions</h2>
<p>Put some instructions here!</p>
</body>
</html>
CSS FILE:
body {
background: #2C2A30;
}
button[type=button] {
background: #D94C47;
font-family: Arial;
padding: 5px 5px;
font-size: 25px;
border-radius: 5px;
padding: 7px 12px;
border: 1px solid #D94C47;
color: white;
font-weight: bold;
}
button[type=button]:hover {
background: #FF7A61;
border: 1px solid #FF7A61;
color: #2C2A30;
}
SCREENSHOT OF CHROME DEVELOPER TOOL:
SCREENSHOT OF FOLDER STRUCTURE:
You should be using <link rel="stylesheet" href="hangman.css">.
You have a typo:
<link rel="stylesheet" type="type/css" href="hangman.css">
should be:
<link rel="stylesheet" type="text/css" href="hangman.css">
Note the type --> text.
Additionally, in HTML5 you don't need the type attribute at all, so you can just have:
<link rel="stylesheet" href="hangman.css">
If the CSS page is linking to the html page, and you're not seeing updates, it's possible that this is a cashing issue. In Google Chrome, right click on the page and click 'Inspect'. THEN, wiith the inspector open, navigate to the top of the page near the address bar and right click on the refresh icon. Then select 'Empty cache and Hard Reload'.
problem 1.Fonts wont change
problem 2.Height on the "id's" wont change
problem one, is there something out of place with the font codes?
<head>
<title>Jubilee Austin Developer</title>
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
</head>
problem two, Ex. this is 1 of the 3 "id's" i have. its not responding to the CSS or at least its not physically showing height change
<section id="about">
<div class="full-width">
<h2>A little bit about me</h2>
<div class="half-width">
<p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now i've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
My entire css
/****Base syles***/
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
Entire code in case you need it for anything
http://i.stack.imgur.com/Q73h1.png
If i left anything out that you need please feel free to ask
About the height part: You won't see the height if the content is less high than the parent element and if there is no background or border. Add something like border: 1px solid red; to see the full height of your element.
#about, #work, #contact {
height: 600px;
border: 1px solid red;
}
Simply invert the order you call your styles:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" type='text/css'>
How do I write the CC logo in HTML, is there something like © (which gives ©)?
(CC stands for Creative Commons).
As schnaader pointed out, there is a TTF font, but pace his answer, it actually can render correctly for people who don't have it installed using CSS's #font-face tag.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
#media screen {
#font-face {
font-family: 'CC-ICONS';
font-style: normal;
font-weight: normal;
src: url('http://mirrors.creativecommons.org/presskit/cc-icons.ttf') format('truetype');
}
span.cc {
font-family: 'CC-ICONS';
color: #ABB3AC;
}
}
</style>
</head>
<body>
<p>Key: a: SA, b: BY, c: CC Circle, d: ND, n: NC, m: Sampling, s: Share, r: Remix, C: CC Full Logo</p>
<span class="cc">a b c d n m s r C</span>
<p>This page is licensed under <span class="cc">C</span></p>
</body>
</html>
Try out this example in jsFiddle.
As far as I know, there is no character for this, so you'll have to use a graphic.
There are some nice ones here. By the way, on this page, there's also a logo font you could use in HTML, but this won't show correctly for other users that don't have the font installed.
It’s 2020 and Unicode 13 is out. It introduced new Creative Commons license symbols. The new Unicode-compatible HTML entity for 🅭 (the circled CC symbol) is 🅭 You’ll need a compatible font for it to work. You can use the CC Symbols font as a fallback that will only be downloaded on devices without a compatible font. Instructions at the link.
This is not for a strictly "Creative Commons" character, but is the "copyleft " symbol that could be have the same meaning for some people like me.
Put the copyright symbol © between a <p></p> labels with a CSS class; in this case called "copy-left" and then flip it with a CSS property.
HTML:
<p class="copy-left">©</p>
CSS:
.copy-left {
display: inline-block;
text-align: right;
margin: 0px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
This looks alright
.creative-commons{
font-family:Arial;
border: 1px solid black;
box-sizing: border-box;
border-radius: 1em;
width: 2em;
height: 2em;
display: inline-block;
line-height: 2em;
text-align: center;
font-size: 1em;
}
<span class="creative-commons">CC</span>
As #schnaader says, I don't think there's a HTML entity code for this, but perhaps you could take a look here
Another answer would be to use Font Awesome
Link: Font Awesome
It gives you the
symbol you were looking for, but was not around when this question was first asked.
To use this symbol copy the following link into the head of your page:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">
Then this where you would like the symbol to be:
<i class="fa fa-creative-commons"></i>
For the full list of icons available using Font Awesome Visit:
Link: Font Awesome Icons
Just for the record, you don't need it to be an HTML entity, in theory you could use any unicode character, encoded as a character entity like &#nnnn; (decimal) or &#xhhhh; (hex).
So if there was a Creative Commons logo in unicode, you might be able to use it. But although there certainly are plenty of symbols, there isn't one for Creative Commons AFAIK.
Looks like it has been at least discussed in the unicode forums, so who knows what will happen in the future.
But for now a graphic is almost certainly the best way to go here.
Thanks Nikki! There is also a CC symbol (normal and compact version) that you can place in your HTML page, from the Creative Commons website itself.
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
Maybe you check this out:
Import fontawesome.io
Put this link in your stylesheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Put this icon class="fa fa-creative-commons"