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"
Related
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'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>
I have index.html which looks like follows:-
html {
background-color: #0000FF;
}
body{
background-color: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<div style="height: 100px; width: 100px;"></div>
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <!--a href="https://www.mozilla.org/en-US/about/manifesto/"--><span>Mozilla Manifesto</span><!--/a--> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>
Initially the margin of h1 is with the window and there is some extra space above body element. But if i add border: 1px solid black to my body element the margin of h1 is with body element.
Why is this so? The border of body element was present even before but we were not just displaying it right?
You can use box-sizing: border-box;
Many browsers have a default user agent stylesheet which automatically adds some styles - even if you haven't specified any.
For example, in chrome, i can see that the h1 will be given a slight margin-before and margin-end which would give you the gap between the body and H1.
You can override this default style-sheet by using one of many reset style-sheets example here
User agent stylesheets will be overridden by any other styles in the following order:
Browser/user default
External
Internal (inside the tag)
Inline (inside an HTML
element)
It may also be worth reading up on css specificity as it explains a lot of simple problems you may come across
I have created an HTML template for a mailchimp campaign that includes font awesome icons in the footer. If I send the HTML email using Mandrill, its works fine. When I import the HTML into a Mailchimp template, the icons dont appear.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
.footer i {
color: #999;
margin: 0 2px;
}
.footer i:hover {
color: #333;
}
.footer p {
text-align: center;
margin-bottom: 15px;
}
.footer a i {
border: none;
outline: none;
}
</style>
Here are the icons in use:
<p>
<a href="http://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i>
<a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i>
<a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i>
<a href="http://instagram.com/"><i class="fa fa-instagram fa-2x"></i>
</p>
You need to use inline CSS as it says :
Use inline CSS Because browser-based email applications, such as
Gmail, strip out <head> and <body> tags by default, always use
inline CSS over embedded CSS.
Read the link
Try converting your code here and then mail it
There's no way to do this. Unfortunately e-mail clients are way too limited. Most can't handle any CSS3, nor #font-face (that's what font-awesome uses for the icons). If you want Outlook support - you certainly want - you shouldn't use the icons as background images too.
The only safe way is to convert every icon to images. Fortunately, iconmoon can help. Choose the icons you need, select to download as SVG/PNG and use the PNG files.
Another warning: use tables for layout, like you were in 1998, no floats or fancy stuff like that.
If you are asking: "How can I use a HTML template, which includes Font Awesome icons, in a MailChimp campaign?" then I can't help.
But I can answer "How can I use Font Awesome icons in a MailChimp campaign?"
The only way that I found that works is to build your MailChimp campaign on their website, using their campaign editor/designer. Basically, I had to turn the icon into an image, and in-line and re-size it to fit my needs. Extra manual work, but this is what I needed. Hope this helps.
I've inherited a very old web page that contains a single paragraph of text centered on the screen, both horizontally and vertically.
Here's the code:
<html>
<body>
<center><table height='100%'>
<tr style="vertical-align:middle"><td>
<pre style="font-size: xx-large">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table></center>
</body>
</html>
It doesn't render properly in jsFiddle, but it does as a standalone page, which you can see here.
I want to bring the markup into the 21st century, while still having the page render basically the same way (in particular, with the text block centered both horizontally and vertically). How can I do this with CSS? A non-table-based solution would be preferable (since the data isn't tabular), but I'll take what I can get.
The new markup I've written for the page looks like this, and has everything except the centering:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>/usr/bin/fortune</title>
<style>
p {
font-size: xx-large;
font-family: monospace;
white-space: pre;
}
/* insert CSS for centering here */
</style>
</head>
<body>
<p>Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).</p>
</body>
</html>
This sounds like a good case for display: table; you want some table styling for non-tabular data:
HTML
<div>
<p>
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information.
Answer available from AT&T on payment of license fee (binary only).
</p>
</div>
CSS
html, body {
height: 100%;
}
div {
display: table;
height: 100%;
margin: 0 auto;
}
p {
display: table-cell;
vertical-align: middle;
}
Only centers the content, and does not support IE6 or 7. For just 1 paragraph of text of unknown size, this will keep it centered: http://jsfiddle.net/hXuee/
You can set the paragraph tag to have position fixed and then use a percentage for the top attribute to center it on the page.
i did this:
position: fixed;
top: 35%;
You can check it out here: http://jsfiddle.net/MYuqe/
One way is to adjust it. Here's a way I did that got it pretty much dead center:
<html>
<body>
<table height='100%' width='100%'>
<tr style="vertical-align:middle; text-align: center;"><td style="position: relative; top: -6%">
<pre style="font-size: xx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>
Edit, to center the block and not the text, I used this:
<html>
<body>
<table height='100%' style="margin-left: auto; margin-right: auto;">
<tr style="vertical-align:middle;"><td style="position: relative; top: -6%;">
<pre style="font-size: xxx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>