Skip to content
Snippets Groups Projects
Commit a9a89135 authored by khawkins98's avatar khawkins98
Browse files

Cleanup information on using fonts

parent c30493b7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
content/pages/general/fonts/v1.3/index.html
+ 31
− 43
View file @ a9a89135
......@@ -16,7 +16,7 @@ icon-version: 1.3
{{#markdown}}
### <i class="icon icon-common" data-icon="🆕"></i> What's new in v1.3
### <i class="icon icon-common" data-icon="🆕"></i> What's new in v1.3?
This version brings the most user-facing changes in several years as we've added in far more "common" icons and simplified the font stack.
......@@ -33,48 +33,36 @@ There have also been a number of "under the hood" changes in v1.3. If you're a d
{{/markdown}}
<h3><i class="icon icon-common" data-icon="ℹ"></i> Using these fonts</h3>
<ul class="tabs" data-tabs id="using-icons-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true"><i class="icon icon-generic" data-icon="N"></i> On a website</a></li>
<li class="tabs-title"><a href="#panel2"><i class="icon icon-generic" data-icon="S"></i> On a computer</a></li>
<li class="tabs-title"><a href="#panel3"><i class="icon icon-functional" data-icon="="></i> Other downloads</a></li>
<h4><a name="websites"></a><i class="icon icon-generic" data-icon="N"></i> On a website</h4>
<p>To use these on a website, include the fonts.css stylesheet listed below, and use the HTML code examples listed in the gallery further down the page.</p>
<ul>
<li>You can load the default CSS by linking to the v1.3 release at <a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css">ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css</a></li>
<ul>
<li>Code is homed at <a href="https://github.com/ebiwd/EBI-Icon-fonts">github.com/ebiwd/EBI-Icon-fonts</a></li>
<li>NPM users can get the code from <a href="https://www.npmjs.com/package/EBI-Icon-fonts">npmjs.com/package/EBI-Icon-fonts</a></li>
<li>React users that are working with the EBI Species icons should check out <a href="https://www.npmjs.com/package/react-ebi-species">react-ebi-species</a></li>
</ul>
<li>To make the icons appear, you need to include particular class and data-icon attributes in the relevant HTML element:
<p><code>&lt;strong&gt;&lt;i class="icon icon-generic" data-icon="4"&gt;&lt;/i&gt; This is an example icon&lt;/strong&gt;</code></p>
<p>The browser's CSS parser will read the data-icon parameter and use the icon pictogram corresponding to "4":</p>
<p><strong><i class="icon icon-generic" data-icon="4"></i> This is an example icon</strong></p>
</li>
<li>The EBI Visual framework no longer adds automatic padding to icons (in most scenarios), if you want to add padding, use the <a href="https://www.ebi.ac.uk/style-lab/websites/patterns/formatting.html">helper classes</a> or add <code>.icon-spacer</code> to the <code>.icon</code>'s element.</li>
<li>SVGs: <a href="https://github.com/ebiwd/EBI-Icon-fonts/archive/v1.3-code.zip">Download this ZIP</a>, expand it and then open the "source" folder.</li>
</ul>
<h4><a name="desktop"></a><i class="icon icon-generic" data-icon="S"></i> On a computer</h4>
<p>If your computer does not already have these fonts installed, use the links to download TTF files. <a href="https://www.google.co.uk/search?q=how+do+i+install+ttf+fonts">Need help installing?</a></p>
<ul>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Common/fonts/EBI-Common.ttf">The Common font</a>: icons for things like "info", "New", "link", "location", "compare", "align", "approve", "download", social media and so on. This is the old EBI-Social, EBI-Generic, EBI-Functional and Font Awesome icons</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Conceptual/fonts/EBI-Conceptual.ttf">The Conceptual font</a>: icons for things like "DNA", "Chemical biology' and "Ontologies"</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Species/fonts/EBI-Species.ttf">Species</a>: where you can find an icon for yeast.</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Chemistry/fonts/EBI-Chemistry.ttf">Chemistry</a>: you guessed it.</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Functional/fonts/EBI-Functional.ttf">The Functional font</a>: icons for "compare", "align", "approve", "download" and so forth.</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Generic/fonts/EBI-Generic.ttf">The Generic font</a>: icons for things like "info", "New", "link" and "location".</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-SocialMedia/fonts/EBI-SocialMedia.ttf">Social Media</a>: handily enough, the Social Media font has icons for... social media!</li>
</ul>
<div class="tabs-content" data-tabs-content="using-icons-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>To use these on a website, include the fonts.css stylesheet listed below, and use the HTML code examples listed in the gallery further down the page.</p>
<ul>
<li>You can load the default CSS by linking to the v1.3 release at <a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css">ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css</a></li>
<ul>
<li>Code is homed at <a href="https://github.com/ebiwd/EBI-Icon-fonts">github.com/ebiwd/EBI-Icon-fonts</a></li>
<li>NPM users can get the code from <a href="https://www.npmjs.com/package/EBI-Icon-fonts">npmjs.com/package/EBI-Icon-fonts</a></li>
<li>React users that are working with the EBI Species icons should check out <a href="https://www.npmjs.com/package/react-ebi-species">react-ebi-species</a></li>
</ul>
<li>To make the icons appear, you need to include particular class and data-icon attributes in the relevant HTML element:
<p><code>&lt;strong&gt;&lt;i class="icon icon-generic" data-icon="4"&gt;&lt;/i&gt; This is an example icon&lt;/strong&gt;</code></p>
<p>The browser's CSS parser will read the data-icon parameter and use the icon pictogram corresponding to "4":</p>
<p><strong><i class="icon icon-generic" data-icon="4"></i> This is an example icon</strong></p>
</li>
<li>The EBI Visual framework no longer adds automatic padding to icons (in most scenarios), if you want to add padding, use the <a href="https://www.ebi.ac.uk/style-lab/websites/patterns/formatting.html">helper classes</a> or add <code>.icon-spacer</code> to the <code>.icon</code>'s element.</li>
</ul>
</div>
<div class="tabs-panel" id="panel2">
<p>If your computer does not already have these fonts installed, use the links to download TTF files. <a href="https://www.google.co.uk/search?q=how+do+i+install+ttf+fonts">Need help installing?</a></p>
<ul>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Common/fonts/EBI-Common.ttf">The Common font</a>: icons for things like "info", "New", "link", "location", "compare", "align", "approve", "download", social media and so on. This is the old EBI-Social, EBI-Generic, EBI-Functional and Font Awesome icons</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Conceptual/fonts/EBI-Conceptual.ttf">The Conceptual font</a>: icons for things like "DNA", "Chemical biology' and "Ontologies"</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Species/fonts/EBI-Species.ttf">Species</a>: where you can find an icon for yeast.</li>
<li><a href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/EBI-Chemistry/fonts/EBI-Chemistry.ttf">Chemistry</a>: you guessed it.</li>
</ul>
<p>NB: You can preview the icons below.</p>
</div>
<div class="tabs-panel" id="panel3">
<p>Need to do something else?</a></p>
<ul>
<li>SVGs: <a href="https://github.com/ebiwd/EBI-Icon-fonts/archive/v1.3-code.zip">Download this ZIP</a>, expand it and then open the "source" folder.</li>
</ul>
</div>
</div>
</div>
<div class="medium-4 columns">
......@@ -97,7 +85,7 @@ There have also been a number of "under the hood" changes in v1.3. If you're a d
window.onload = function() {
$(document).ready(function() {
$('#thegallery').liveFilter({
fitlerTargetCustomDiv: 'tbody tr',
fitlerTargetCustomDiv: 'div.column',
defaultText: '',
noMatches: ''
});
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment