代码之家 › 专栏 › 技术社区 › mir

如何用HTML编写CC(知识共享徽标)

html-encode html

mir · 技术社区 · 17 年前

我如何在HTML中编写CC徽标,是否有类似的内容 © (哪一个给出了答案)?

(CC代表知识共享)。

10 回复 | 直到 11 年前

Ori 15 年前

速度他的回答是,它实际上可以正确地呈现给那些没有使用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

Mechanical snail Rajani Dhawan 14 年前

据我所知,这个没有字符,所以你必须使用图形。

有一些不错的 here . 顺便说一句,在这个页面上,还有一个可以在HTML中使用的徽标字体,但是对于没有安装该字体的其他用户来说,它无法正确显示。

Daniel 6 年前

现在是2020年 Unicode 13 is out . 它介绍 new Creative Commons license symbols . 新的Unicode兼容HTML实体(带圆圈的CC符号)为 🅭 CC Symbols font 作为回退,只能在没有兼容字体的设备上下载。链接上的说明。

GuyXY Anonimo 8 年前

这不是一个严格意义上的“知识共享”字符,而是一个“copyleft”符号,对于像我这样的一些人来说可能具有相同的含义。

放置版权符号 © 介于 <p></p> 带有CSS类的标签;在本例中称为“复制左”,然后使用CSS属性将其翻转。

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

Community Mohan Dere 9 年前

像 @schnaader here

Community Mohan Dere 9 年前

链接: Font Awesome

您正在寻找的符号,但在第一次提出此问题时不存在。

要使用此符号,请将以下链接复制到页面标题中:

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

<i class="fa fa-creative-commons"></i>

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

Font Awesome Icons

JFS 7 年前

这看起来不错

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

Alastair 17 年前

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

因此,如果有unicode格式的CreativeCommons徽标,您可能可以使用它。但是,尽管确实有很多 symbols ,没有一个是为创作共用区设计的。

看起来至少是这样 discussed 在unicode论坛上,谁知道将来会发生什么呢。

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

Luxii 9 年前

谢谢Nikki!还有一个CC符号(普通和紧凑版本),您可以从 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>.

Mogsdad 8 年前

也许你可以看看这个:

导入font.io

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
class="fa fa-creative-commons"