Как написать CC (логотип Creative Commons) в HTML
Как мне написать логотип CC в HTML, есть ли что-то вроде © (что дает ©)?
(CC означает Creative Commons).
Ответы 10
Насколько мне известно, для этого нет символа, поэтому вам придется использовать графику.
Есть несколько хороших здесь. Кстати, на этой странице также есть шрифт логотипа, который вы можете использовать в HTML, но он не будет правильно отображаться для других пользователей, у которых этот шрифт не установлен.
Как говорит @schnaader, я не думаю, что для этого есть код объекта HTML, но, возможно, вы могли бы взглянуть здесь
С апреля 2020 года появилась запись Юникод - 🅭, которая, однако, может еще не поддерживаться большинством шрифтов. См. Ответ @ Aeyoun ниже: stackoverflow.com/a/61313326/1035977
Просто для записи, вам не нужно, чтобы это был объект HTML, теоретически вы можете использовать любой символ юникода, закодированный как символьный объект, такой как &#nnnn; (десятичный) или &#xhhhh; (шестнадцатеричный).
Так что, если бы в юникоде был логотип Creative Commons, вы могли бы его использовать. Но хотя символы определенно много, для Creative Commons AFAIK их нет.
Похоже, на форумах юникода было не меньше обсуждались, так что кто знает, что произойдет в будущем.
Но на данный момент графика почти наверняка лучший способ пойти сюда.
Теперь есть: см. Ответ, предоставленный ниже @Aeyoun (stackoverflow.com/a/61313326/1035977)
Как указал Шнаадер, существует шрифт 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>
Попробуйте этот пример в jsFiddle.
К сожалению, браузеры немного могут не «любить» шрифты TTF, поэтому предложение, сделанное @Aeyoun ниже (stackoverflow.com/a/61313326/1035977), лучше, по крайней мере, для 2020 года.
Это не для персонажа строго «Creative Commons», но это символ «авторского лева», который может иметь то же значение для некоторых людей, как я.
Поместите символ авторского права © между метками <p></p> с классом CSS; в данном случае это называется «копировать влево», а затем перевернуть его с помощью свойства CSS.
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";
}
Это сработало, но я добавил его в промежутке, потому что в противном случае он искажает весь абзац. Я изложил эту суть и указал ваш CSS gist.github.com/JGallardo/6077195
Другой ответ - использовать Font Awesome.
Link: Font Awesome
Это дает вам
Символ 
, который вы искали, но отсутствовал, когда этот вопрос был впервые задан.
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>
Чтобы увидеть полный список значков, доступных с помощью Font Awesome, посетите:
Link: Font Awesome Icons
Лучший ответ, используя это!
Спасибо, Никки! Существует также символ CC (обычная и компактная версия), который вы можете разместить на своей HTML-странице из Сам сайт Creative Commons.
<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>.Может быть, вы проверите это:
Импортировать fontawesome.io
Поместите эту ссылку в свою таблицу стилей:
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssСтавим эту иконку
class = "fa fa-creative-commons"
Это выглядит хорошо
.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>Я должен сказать, что хотя к 2020 году это, вероятно, будет избыточным ответом (поскольку теперь у нас есть поддержка Unicode для ?), на сегодняшний день это было наиболее творческое и находчивое решение; получившийся символ может не быть «идеальным по пикселям», но это очень хорошее решение, которое занимает очень мало места, не требует дополнительных загрузок и будет работать практически для каждого символа, который просто представляет собой несколько букв внутри круга! Очень хороший CSS-fu - +1 от меня, даже если это может быть не «лучший» способ использования символа ?, но, безусловно, самый креативный! (а это работает)
Сейчас 2020 год, Unicode 13 отсутствует. Он ввел новые символы лицензии Creative Commons. Новый Unicode-совместимый HTML-объект для ? (обведенный символ CC) - 🅭. Для его работы потребуется совместимый шрифт. Вы можете использовать Шрифт CC Symbols в качестве запасного варианта, который будет загружен только на устройства без совместимого шрифта. Инструкции по ссылке.
Шрифты, которые у меня есть, определенно не поддерживают «новую» сущность Unicode ... ну, некоторые поддерживают, но не тот, который я использую на своих веб-сайтах ... ваше предложение сработало превосходно, и статья в блоге от @Daniel Aleksandersen очень, очень полезно - кроме того, поскольку шрифты «обновляются» для поддержки Unicode 13, это решение постепенно ухудшается: если ваш шрифт уже поддерживает Unicode 13, отлично, вам не нужно ничего делать, кроме использования 🅭; в противном случае браузеры «вернутся» к шрифту CCSymbols, который при размере всего 2 КБ является минимальным, насколько это возможно, и стоит дополнительных усилий. Хороший!
Я только что увидел, что вы связались с пресс-китом через минуту после меня, так что вы получите мой голос :)