Changed some things up!
This commit is contained in:
mozilla
Родитель
9d6b75b060
Коммит
6a2a15d1d1
|
|
@ -1,13 +1,13 @@
|
|||
@font-face {
|
||||
font-family: 'mozmaker-icons';
|
||||
src: url('mozmaker-icons.woff') format('woff');
|
||||
font-family: 'mozilla-foundation-icons';
|
||||
src: url('mozilla-foundation-icons.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'mozmaker-icons' !important;
|
||||
font-family: 'mozilla-foundation-icons' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
Двоичные данные
favicon.png
Двоичные данные
favicon.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 861 B После Ширина: | Высота: | Размер: 841 B |
|
|
@ -1,13 +1,13 @@
|
|||
<html>
|
||||
<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 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="js/icon-list.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>
|
||||
</head>
|
||||
|
|
|
|||
34
js/app.js
34
js/app.js
|
|
@ -5,23 +5,37 @@ $(document).ready(function(){
|
|||
var iconfile = icons[i];
|
||||
|
||||
var iconItem = $("<div class='icon-item'></div>");
|
||||
|
||||
|
||||
var iconImageWrapper = $("<div class='icon-image-wrapper'></div>");
|
||||
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 iconClass = $("<div class='icon-class'>" + iconClassName + "</div>");
|
||||
|
||||
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(".","") + "'/>");
|
||||
// iconItem.append(iconTest);
|
||||
var iconCode = $('<div class="icon-code">content: "/????";</div>');
|
||||
iconItem.append(iconCode);
|
||||
|
||||
var iconTest = $("<div class='test " + iconClassName.replace(".","") + "'/>");
|
||||
iconItem.append(iconTest);
|
||||
|
||||
$(".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-ui input").on("keyup",function(){
|
||||
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
Двоичные данные
source-files/mozilla-foundation-icons.sketch
Двоичный файл не отображается.
25
style.css
25
style.css
|
|
@ -35,9 +35,20 @@ body {
|
|||
text-align: center;
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.icon-name, .icon-class, .icon-code {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.test {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-image-wrapper {
|
||||
height: 150px;
|
||||
display: flex;
|
||||
padding: 10px 10px 60px 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -53,19 +64,7 @@ body {
|
|||
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 {
|
||||
border-bottom: solid 2px black;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче