mozilla
/
foundation-icons
зеркало из https://github.com/mozilla/foundation-icons.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Changed some things up!

This commit is contained in:
mozilla 2016-11-21 12:09:48 -08:00
Родитель 9d6b75b060
Коммит 6a2a15d1d1
7 изменённых файлов: 46 добавлений и 23 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

6
assets/mozmaker-icons.css → assets/mozilla-foundation-icons.css
Просмотреть файл

@ -1,13 +1,13 @@
@font-face { @font-face {
font-family: 'mozmaker-icons'; font-family: 'mozilla-foundation-icons';
src: url('mozmaker-icons.woff') format('woff'); src: url('mozilla-foundation-icons.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
[class^="icon-"]:before, [class*=" icon-"]:before { [class^="icon-"]:before, [class*=" icon-"]:before {
/* use !important to prevent issues with browser extensions that change fonts */ /* use !important to prevent issues with browser extensions that change fonts */
font-family: 'mozmaker-icons' !important; font-family: 'mozilla-foundation-icons' !important;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;

0
assets/mozmaker-icons.woff → assets/mozilla-foundation-icons.woff
Просмотреть файл

Двоичные данные
favicon.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 861 B

После

Ширина:  |  Высота:  |  Размер: 841 B

4
index.html
Просмотреть файл

@ -1,13 +1,13 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="assets/mozmaker-icons.css" type="text/css"> <link rel="stylesheet" href="assets/mozilla-foundation-icons.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<script src="js/icon-list.js"></script> <script src="js/icon-list.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<link rel="shortcut icon" href="favicon.png"> <link rel="shortcut icon" href="favicon.png?1">
<title>Mozilla Foundation Icon Font</title> <title>Mozilla Foundation Icon Font</title>
</head> </head>

34
js/app.js
Просмотреть файл

@ -5,23 +5,37 @@ $(document).ready(function(){
var iconfile = icons[i]; var iconfile = icons[i];
var iconItem = $("<div class='icon-item'></div>"); var iconItem = $("<div class='icon-item'></div>");
var iconImageWrapper = $("<div class='icon-image-wrapper'></div>");
var iconImage = $("<img src='./svgs/" + iconfile + "'/>"); var iconImage = $("<img src='./svgs/" + iconfile + "'/>");
var iconName = $("<div class='icon-name'><a href='./svgs/"+iconfile+"'>" + iconfile + "</a></div>");
iconImageWrapper.append(iconImage);
var iconName = $("<div class='icon-name'><a href='./svgs/"+iconfile+"'>" + iconfile + "</a></div>");
var iconClassName = ".icon-" + iconfile.replace(".svg",""); var iconClassName = ".icon-" + iconfile.replace(".svg","");
var iconClass = $("<div class='icon-class'>" + iconClassName + "</div>"); var iconClass = $("<div class='icon-class'>" + iconClassName + "</div>");
iconItem.attr("name",iconfile.replace(".svg","")); iconItem.attr("name",iconfile.replace(".svg",""));
iconItem.append(iconImage).append(iconName).append(iconClass); iconItem.append(iconImageWrapper).append(iconName).append(iconClass);
// var iconTest = $("<div class='test " + iconClassName.replace(".","") + "'/>"); var iconCode = $('<div class="icon-code">content: "/????";</div>');
// iconItem.append(iconTest); iconItem.append(iconCode);
var iconTest = $("<div class='test " + iconClassName.replace(".","") + "'/>");
iconItem.append(iconTest);
$(".dynamic-icon-list").append(iconItem); $(".dynamic-icon-list").append(iconItem);
} }
setTimeout(function(){
$(".icon-item").each(function(){
var el = $(this).find(".test")[0];
var code = getEntityCode(window.getComputedStyle(el,':before').content);
$(this).find(".icon-code").text('content: "\\' + code + '";');
});
},10);
// Search for icons when someone types // Search for icons when someone types
$(".search-ui input").on("keyup",function(){ $(".search-ui input").on("keyup",function(){
var searchTerm = $(this).val(); var searchTerm = $(this).val();
@ -50,3 +64,13 @@ function searchIcons(term){
} }
}); });
} }
function getEntityCode(string) {
var code = string.charCodeAt(1);
var codeHex = code.toString(16);
while (codeHex.length < 4) {
codeHex = "0" + codeHex;
}
return codeHex;
}

Двоичные данные
source-files/mozilla-foundation-icons.sketch
Просмотреть файл

Двоичный файл не отображается.

25
style.css
Просмотреть файл

@ -35,9 +35,20 @@ body {
text-align: center; text-align: center;
min-width: 200px; min-width: 200px;
position: relative; position: relative;
padding: 10px;
}
.icon-name, .icon-class, .icon-code {
padding: 5px 0;
}
.test {
display: none;
}
.icon-image-wrapper {
height: 150px; height: 150px;
display: flex; display: flex;
padding: 10px 10px 60px 10px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -53,19 +64,7 @@ body {
transform: scale(1.2); transform: scale(1.2);
} }
.icon-name {
position: absolute;
bottom: 40px;
width: 100%;
left: 0;
}
.icon-class {
position: absolute;
bottom: 15px;
width: 100%;
left: 0;
}
h1 { h1 {
border-bottom: solid 2px black; border-bottom: solid 2px black;