如何在 HTML 中编写 CC(知识共享标志)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/282171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:42:50  来源:igfitidea点击:

How to writing CC (The Creative Commons logo) in HTML

htmlhtml-encode

提问by mir

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

我如何在 HTML 中编写 CC 徽标,是否有类似的东西©(它给出了 ©)?

(CC stands for Creative Commons).

(CC 代表知识共享)。

采纳答案by schnaader

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.

有一些不错的人在这里。顺便说一下,在此页面上,还有一种您可以在 HTML 中使用的徽标字体,但是对于未安装该字体的其他用户,它无法正确显示。

回答by Ori

As schnaader pointed out, there is a TTF font, but pacehis answer, it actually can render correctly for people who don't have it installed using CSS's @font-facetag.

作为schnaader指出,有TTF字体,但踱步他的答案,它实际上可以正确地呈现它安装在使用CSS的谁没有人@font-face的标签。

<!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.

在 jsFiddle 中试试这个例子

回答by Anonimo

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.

这不是针对严格的“知识共享”角色,而是针对像我这样的某些人可能具有相同含义的“copyleft”符号。

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.

将版权符号放在带有 CSS 类&copy;<p></p>标签之间;在这种情况下称为“copy-left”,然后使用 CSS 属性翻转它。

HTML:

HTML:

<p class="copy-left">&copy;</p>

CSS:

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";
}

回答by toolkit

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

正如@schnaader所说,我不认为有一个 HTML 实体代码,但也许你可以看看这里

回答by Alastair

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).

只是为了记录,你不需要它是一个 HTML 实体,理论上你可以使用任何unicode character,编码为字符实体,如&#nnnn;(十进制)或&#xhhhh;(十六进制)。

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.

因此,如果 unicode 中有 Creative Commons 徽标,您也许可以使用它。但是,尽管肯定有很多符号,但没有一个用于 Creative Commons AFAIK。

Looks like it has been at least discussedin the unicode forums, so who knows what will happen in the future.

看起来至少在unicode论坛上已经讨论过,所以谁知道未来会发生什么。

But for now a graphic is almost certainly the best way to go here.

但就目前而言,图形几乎肯定是最好的方式。

回答by Nikki Pantony

Another answer would be to use Font Awesome

另一个答案是使用 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:

有关使用 Font Awesome 可用的完整图标列表,请访问:

Link: Font Awesome Icons

链接:字体真棒图标

回答by JFS

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>

回答by Aeyoun

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 fontas a fallback that will only be downloaded on devices without a compatible font. Instructions at the link.

现在是 2020 年,Unicode 13 已经过时了。它引入了新的知识共享许可符号。新的 Unicode 兼容 HTML 实体(带圆圈的 CC 符号)是&#x1f16d;您需要兼容的字体才能使其工作。您可以使用CC Symbols 字体作为后备,只能在没有兼容字体的设备上下载。链接中的说明。

回答by Luxii

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.

谢谢尼基!还有一个 CC 符号(普通版和精简版),您可以将其放置在来自知识共享网站本身的HTML 页面中。

<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>.

回答by AlchadPlays

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"

  1. 导入 fontawesome.io

  2. 将此链接放在您的样式表中: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

  3. 把这个图标 class="fa fa-creative-commons"