Login/Register
How to writing CC (The Creative Commons logo) in HTML
Asked Answered
Solved htmlhtml-encode
I

10

13

How do I write the CC logo in HTML, is there something like © (which gives ©)?

(CC stands for Creative Commons).

Iphigenia answered 11/11, 2008 at 21:16 Comment(0)
T
9

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.

Tirol answered 11/11, 2008 at 21:19 Comment(0)
L
10

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.

Lockett answered 7/3, 2011 at 4:44 Comment(1)
Unfortunately, some browsers may not 'like' TTF fonts, so the suggestion made by @Aeyoun below (https://mcmap.net/q/846958/-how-to-writing-cc-the-creative-commons-logo-in-html) is better, at least for 2020 onwards. – Tomsk
T
9

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.

Tirol answered 11/11, 2008 at 21:19 Comment(0)
P
6

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 &#x1f16d; 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.

Pendergrass answered 20/4, 2020 at 0:10 Comment(1)
The fonts I've got most certainly do not support the 'new' Unicode entity... well, a few do, but not the one I'm using on my websites... your suggestion worked admirably well, and the blog article from @Pendergrass Aleksandersen is very, very useful — also, as fonts get 'upgraded' to support Unicode 13, this solution degrades gracefully: if your font already supports Unicode 13, great, you don't need to do anything beyond using &#x1f16d;; if not, browsers will 'fall back' to the CCSymbols font, which, at merely the size of 2K, is as minimal as one can get, and well worth the extra trouble. Nice! – Tomsk
K
4

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 &copy; 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">&copy;</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";
}
Kashmir answered 16/3, 2013 at 23:22 Comment(1)
This worked but I added it in a span because otherwise it distorts the entire paragraph. I made this gist and credited your CSS gist.github.com/JGallardo/6077195 – Sputter
H
3

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>
Hereinafter answered 11/12, 2018 at 8:13 Comment(1)
I have to say, while this is probably a redundant answer by 2020 (since we do now have Unicode support for 🅭), this was the most creative and resourceful solution by far; the resulting symbol might not be 'pixel-perfect' but it's a very good solution which takes very little space, no need for additional downloads, and will work for pretty much every symbol which just happens to be a few letters inside a circle! Very nice CSS-fu — +1 from me, even if this might not be the 'best' way of having the 🅭 symbol, but it certainly is the most creative one! (and it works) – Tomsk
F
2

As @schnaader says, I don't think there's a HTML entity code for this, but perhaps you could take a look here

Favour answered 11/11, 2008 at 21:26 Comment(2)
Just saw that you linked to the press kit just a minute after me, so you get my vote up :) – Tirol
Since April 2020, there is now a Unicode entry — &#x1f16d; — which, however, may not be supported yet by most fonts. See @Aeyoun's answer below: https://mcmap.net/q/846958/-how-to-writing-cc-the-creative-commons-logo-in-html – Tomsk
H
2

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

Hope answered 31/12, 2015 at 16:8 Comment(1)
Best answer using this! – Barret
H
1

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.

Heligoland answered 11/11, 2008 at 22:50 Comment(1)
Now there is: see the answer provided below by @Aeyoun (https://mcmap.net/q/846958/-how-to-writing-cc-the-creative-commons-logo-in-html) – Tomsk
C
0

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>.
Cosentino answered 2/7, 2016 at 14:15 Comment(0)
Y
0

Maybe you check this out:

  1. Import fontawesome.io

  2. Put this link in your stylesheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

  3. Put this icon class="fa fa-creative-commons"

Yardarm answered 2/1, 2018 at 13:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.