diff --git a/assets/mozmaker-icons.css b/assets/mozilla-foundation-icons.css similarity index 96% rename from assets/mozmaker-icons.css rename to assets/mozilla-foundation-icons.css index db95708..97e445d 100755 --- a/assets/mozmaker-icons.css +++ b/assets/mozilla-foundation-icons.css @@ -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; diff --git a/assets/mozmaker-icons.woff b/assets/mozilla-foundation-icons.woff similarity index 100% rename from assets/mozmaker-icons.woff rename to assets/mozilla-foundation-icons.woff diff --git a/favicon.png b/favicon.png index 960c546..1ab7858 100644 Binary files a/favicon.png and b/favicon.png differ diff --git a/index.html b/index.html index eecf228..ec4adb2 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - + - + Mozilla Foundation Icon Font diff --git a/js/app.js b/js/app.js index 5162dff..f78423c 100644 --- a/js/app.js +++ b/js/app.js @@ -5,23 +5,37 @@ $(document).ready(function(){ var iconfile = icons[i]; var iconItem = $("
"); - + + var iconImageWrapper = $("
"); var iconImage = $(""); - var iconName = $("
" + iconfile + "
"); + iconImageWrapper.append(iconImage); + + var iconName = $("
" + iconfile + "
"); var iconClassName = ".icon-" + iconfile.replace(".svg",""); var iconClass = $("
" + iconClassName + "
"); iconItem.attr("name",iconfile.replace(".svg","")); - iconItem.append(iconImage).append(iconName).append(iconClass); + iconItem.append(iconImageWrapper).append(iconName).append(iconClass); - // var iconTest = $("
"); - // iconItem.append(iconTest); + var iconCode = $('
content: "/????";
'); + iconItem.append(iconCode); + + var iconTest = $("
"); + 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; +} diff --git a/source-files/mozilla-foundation-icons.sketch b/source-files/mozilla-foundation-icons.sketch index e5e82d4..db02fe8 100644 Binary files a/source-files/mozilla-foundation-icons.sketch and b/source-files/mozilla-foundation-icons.sketch differ diff --git a/style.css b/style.css index 5632b98..6296279 100644 --- a/style.css +++ b/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;