Icons
Last updated: 31/03/2022
The following has evaluated to null or missing:
==> entry.getAssetRenderer().getArticle [in template "10157#10197#9937242" at line 9, column 54]
----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign docXml = saxReaderUtil.read(e... [in template "10157#10197#9937242" at line 9, column 17]
----
1<div class="gcss-op">
2 <div class="gs-grid gs-grid-3col gs-grid-sm-4col gs-grid-md-5col gs-grid-xl-7col gs-grid-gap-16 gs-grid-gap-md-24" style="align-items: start;">
3
4 <#list entries as entry>
5 <#assign entry = entry />
6 <#assign assetRenderer = entry.getAssetRenderer() />
7 <#assign className = assetRenderer.getClassName() />
8
9 <#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) />
10 <#assign rootElement = docXml.getRootElement() />
11 <#assign availableLocales = rootElement.attribute("available-locales").getText() />
12 <#assign defaultLocale = rootElement.attribute("default-locale").getText() />
13
14 <#if (availableLocales?contains(locale)) >
15 <#assign IconName = docXml.valueOf("//dynamic-element[@name='IconName']/dynamic-content[@language-id='"+locale+"']/text()") />
16
17 <#assign LinkSVG = docXml.valueOf("//dynamic-element[@name='LinkSVG']/dynamic-content[@language-id='"+locale+"']/text()") />
18 <#assign LinkPNG = docXml.valueOf("//dynamic-element[@name='LinkPNG']/dynamic-content[@language-id='"+locale+"']/text()") />
19 <#else>
20
21 <#assign IconName = docXml.valueOf("//dynamic-element[@name='IconName']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
22 <#assign LinkSVG = docXml.valueOf("//dynamic-element[@name='LinkSVG']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
23 <#assign LinkPNG = docXml.valueOf("//dynamic-element[@name='LinkPNG']/dynamic-content[@language-id='"+defaultLocale+"']/text()") />
24 </#if>
25 <a href="#" role="button" data-toggle="modal" data-target="#modal-${IconName}" class="gs-template-card-icon" aria-label="${IconName}">
26 <div class="gs-template-card-icon-glyph text-center">
27 <i class="gs-icon-${IconName}" aria-hidden="true"></i>
28 </div>
29 <p class="gs-template-card-icon-title text-center">${IconName}</p>
30 </a>
31
32 <div aria-hidden="true" aria-labelledby="modal-title-${IconName}" class="modal op-modal fade" id="modal-${IconName}" role="dialog" style="display: none;" tabindex="-1">
33 <div class="modal-dialog" role="document">
34 <div class="modal-content">
35
36 <div class="gs-modal-header gs-grid gs-grid-2col gs-grid-gap-24">
37 <h2 class="modal-title" id="modal-title-${IconName}">${IconName}</h2>
38 <a role="button" class="gs-btn gs-btn-ghost" href="#" aria-label="Close" data-dismiss="modal" style="justify-self: end;">
39 <i class="gs-icon-close" aria-hidden="true"></i>
40 </a>
41 </div>
42
43 <div class="modal-body text-center">
44
45 <p class="modal-glyph"><i class="gs-icon-${IconName}" aria-hidden="true"></i></p>
46
47 <h3>Embedding CSS</h3>
48 <p class="gs-font-sm">Copy and paste the CSS code into your website.</p>
49 <pre><code id="code-${IconName}" class="copy-paste"><i class="gs-icon-${IconName}" aria-hidden="true"></i></code></pre>
50 <a id="copy" class="gs-btn gs-btn-sec" href="#" onclick="CopyToClipboard('code-${IconName}');return false;" aria-label="Copy ${IconName} CSS code">Copy</a>
51
52 <h3 class="mt-5">Downloading</h3>
53 <p class="gs-font-sm">Download the SVG or PNG file and use as you like.</p>
54 <div class="gs-grid gs-grid-2col gs-grid-gap-16 mt-3">
55 <a class="gs-btn gs-btn-sec" href="/documents/d/global/${IconName}" target="_blank" download aria-label="Download ${IconName} SVG">SVG</a>
56 <a class="gs-btn gs-btn-sec" href="/documents/d/global/${IconName}-png" target="_blank" download aria-label="Download ${IconName} PNG">PNG</a>
57 </div>
58
59 </div>
60 </div>
61 </div>
62 </div>
63
64 <script>
65 $('#modal-${IconName}').on('shown.bs.modal', function () {
66 $('#modal-${IconName}').trigger('focus')
67 })
68 </script>
69 </#list>
70 </div>
71</div>
72
73<style>
74
75.modal-glyph {
76 margin-bottom:-16px!important;
77 text-align: center;
78 padding: 0.5rem 0 1rem 0;
79 margin: 0;
80}
81.modal-glyph i {
82 font-size:4rem!important;
83 line-height:1!important;
84 color:#444444!important;
85}
86
87.gs-template-card-icon {
88 overflow: hidden;
89 display: flex;
90 flex-direction: column;
91 justify-content: center;
92 border-radius: 5px;
93}
94
95.gs-template-card-icon-glyph {
96 border-radius: 5px;
97 background-color: #F5F5F5F5;
98 font-size: 2.25rem;
99 line-height: 1!important;
100 padding: 24px 0 24px 0;
101 margin-bottom: 8px;
102}
103
104a.gs-template-card-icon {
105 color: #444444!important;
106 text-decoration: none!important;
107}
108
109.gs-template-card-icon .gs-template-card-icon-title {
110 font-size: 14px!important;
111 color: #666666!important;
112}
113
114a.gs-template-card-icon:hover {
115 color: #3366CC!important;
116}
117a.gs-template-card-icon:focus {
118 outline: 2px solid #3366CC!important;
119 outline-offset: 4px;
120 color: #3366CC!important;
121}
122
123</style>
How to implement
There are several ways to use the Publications Office icons: CSS, SVG or PNG. Below we explain the main implementations.
Embedding CSS
This is the fastest and simplest method. Simply copy and paste the CSS code provided for each icon to insert it into your website. You may then style and size it as desired with CSS.
Example of embedding:
<i class="gs-icon-heart" aria-hidden="true"></i>
Note: Embedding is currently only supported for sites hosted on the Publications Office portal.
Downloading SVG
Downloading SVG files is recommended for use in graphic and web design software.
You may also include SVG files directly in your website using several methods.
External link in a new tab: Learn more about how to include SVG files in websites
Downloading PNG
The PNG format is recommended for documents, presentations and other office software use.
Accessibility aspects
Hiding decorative icons from assistive technologies
Given that often SVG icons are used as decorative images(external link, opens in a new window), the aria-hidden attribute is included and set to true by default in the code provided. This prevents assistive technologies from reading the Unicode characters of the glyph icon CSS (for example \e909). You may modify as necessary based on specific cases.
<i class="gs-icon-upload" aria-hidden="true"></i>
Icon with text link
A common use on websites is adding an icon to a text link. The link label is "Download PDF", the icon remains decorative as the screen reader will read the text label, and we add two elements:
display: inline-blockremoves the underline from the icon- and
margin-right: 0.35remadds space between the icon and the accompanying text.
Download PDF (Example, link disabled)
<a href="#">
<i class="gs-icon-download" aria-hidden="true" style="display: inline-block; margin-right: 0.35rem;"></i>Download PDF
</a>
Additional resources
There are many possibilities, it is best to select the option that best suits the needs of each situation. Below are some resources that explain clearly the different options:
Accessible icons(external link, opens in a new window)
How Can I Make My Icon System Accessible?(external link, opens in a new window)
Info Corner
Follow us
This site is managed by
