https://docs.sandbox.joomla.org/api.php?action=feedcontributions&feedformat=atom&user=Bakual 2026-10-09T20:08:04Z User contributions MediaWiki 1.43.0 https://docs.sandbox.joomla.org/index.php?title=Joomla_Translation_Program/Intro&diff=478539 2018-02-24T11:35:09Z

<p>Bakual: Change link for team to volunteers page</p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> {{dablink|'''&lt;translate&gt;&lt;!--T:1--&gt;<br /> &quot;...providing support for the international community is a core value of Joomla!...&quot;&lt;/translate&gt;'''}}<br /> <br /> &lt;translate&gt;&lt;!--T:2--&gt;<br /> The purpose of the Translation Team within the [[S:MyLanguage/Production Working Groups|Production Department]] is to be a liaison between the Joomla! Translation Teams, the International Community and the other Joomla! Teams on user and technical matters relating to the translation of the Joomla! application.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:3--&gt;<br /> The Translation Working Group carries out its work according to the [http://community.joomla.org/translations/translation-policy.html Joomla! Translation and Localization Policy].&lt;/translate&gt; <br /> <br /> &lt;translate&gt;&lt;!--T:4--&gt;<br /> The Translation Working Group is also called the Joomla! Translation Coordination Team. It is composed of members of the Joomla! Translation Teams.<br /> See a list of [https://volunteers.joomla.org/teams/core-translation-team current members here].&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:5--&gt;<br /> We have more than 50 local language coordinators representing their local teams.<br /> See a list of [http://forum.joomla.org/memberlist.php?mode=group&amp;g=13 current members here].<br /> These Teams are also listed on a per language basis: [http://community.joomla.org/translations/joomla-3-translations.html 3.x current languages here]&lt;/translate&gt;<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:6--&gt;<br /> [[Category:Translations Working Group]]<br /> [[Category:Permanent Working Groups]]<br /> [[Category:Working Groups]]<br /> [[Category:Languages]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Joomla_Translation_Program/How_can_you_help&diff=478538 2018-02-24T11:32:45Z

<p>Bakual: Change link for team to volunteers page</p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> &lt;translate&gt;&lt;!--T:1--&gt;<br /> The Joomla! Project wish to see the Joomla! CMS made available in any language.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:2--&gt;<br /> For that to become possible we need the help from talented native speakers who wish to contribute by translating Joomla! language packages into their native language.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:3--&gt;<br /> To create a translation, you must create a [[S:MyLanguage/J3.2:Making_a_Language_Pack_for_Joomla|Joomla! 3.x language pack]]&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:4--&gt;<br /> In case your language is not currently available at this list [http://joomlacode.org/gf/project/jtranslation3_x/frs/ at joomlacode 3.x repository] and you have already created a local translation then please follow these steps:&lt;/translate&gt;<br /> &lt;translate&gt;&lt;!--T:5--&gt;<br /> #Create a user and a new project at [http://joomlacode.org/gf/ joomlacode]<br /> #When project approved and you have uploaded your language files then please post in the Translation forum.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:6--&gt;<br /> Should your language already be listed and you wish to contribute then please start by contacting [http://community.joomla.org/translations/joomla-3-translations.html the local 3.x Translation Coordinator].&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:7--&gt;<br /> If your language is not listed and you want to join the Joomla! Translation Teams, please contact: [https://volunteers.joomla.org/teams/core-translation-team a member of the Coordination].&lt;/translate&gt;<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:9--&gt;<br /> [[Category:Working Groups]]<br /> [[Category:Translations Working Group]]<br /> [[Category:Permanent Working Groups]]<br /> [[Category:Working Groups]]<br /> [[Category:Languages]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Joomla:Commit_Guidelines&diff=198874 2015-06-30T12:14:00Z

<p>Bakual: </p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> &lt;translate&gt;&lt;!--T:1--&gt;<br /> Commit Guidelines for the Joomla! CMS.<br /> <br /> These guidelines are not meant to be strict rules, but a guide for what we consider best practice.&lt;/translate&gt;<br /> &lt;translate&gt;== Merge-Commit vs Squashing == &lt;!--T:2--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Merge-Commit === &lt;!--T:3--&gt;<br /> When you click the “Merge” button on GitHub, it will create a merge-commit named “Merge pull request #1234 from User/Branch”. This commit will show together with all commits in the PR in the log. Each commit will have the original date when it was created, not when it was actually merged. While this is nice to preserve the actual commit history and is fine with Git Clients which show the branches, it becomes unreadable especially on the GitHub log page.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Squashing === &lt;!--T:4--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:5--&gt;<br /> When you squash the commits, you create a single commit consisting of all original commits. This single commit is then pushed to master and can be named in a standardised way.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Recommendation === &lt;!--T:6--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:7--&gt;<br /> We recommend to squash the commits in most cases. The “Merge” button in GitHub should only be used for simple PRs with only a few commits and when it’s only a few days old. Most of time, this is the case for simple PRs dealing with codestyle or language strings.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;== Naming Conventions == &lt;!--T:8--&gt;<br /> When squashing commits, one should follow these naming conventions so the log will become easier to read.&lt;/translate&gt; <br /> <br /> &lt;translate&gt;=== Format === &lt;!--T:9--&gt;&lt;/translate&gt;<br /> <br /> :'''&lt;[Prefix]&gt; &lt;Title&gt;. &lt;Issue&gt;'''<br /> :&lt;''Description''&gt;<br /> <br /> &lt;translate&gt;=== Prefixes === &lt;!--T:10--&gt;&lt;/translate&gt;<br /> <br /> {| class=&quot;wikitable&quot;<br /> !&lt;translate&gt;&lt;!--T:11--&gt;<br /> Prefix&lt;/translate&gt;<br /> !&lt;translate&gt;&lt;!--T:12--&gt;<br /> Meaning&lt;/translate&gt;<br /> |-<br /> |sec<br /> |&lt;translate&gt;&lt;!--T:13--&gt;<br /> Security&lt;/translate&gt;<br /> |-<br /> |bug<br /> |&lt;translate&gt;&lt;!--T:14--&gt;<br /> Bug fix&lt;/translate&gt;<br /> |-<br /> |add<br /> |&lt;translate&gt;&lt;!--T:15--&gt;<br /> Add&lt;/translate&gt;<br /> |-<br /> |rem<br /> |&lt;translate&gt;&lt;!--T:16--&gt;<br /> Remove&lt;/translate&gt;<br /> |-<br /> |lang<br /> |Language<br /> |-<br /> |doc<br /> |&lt;translate&gt;&lt;!--T:17--&gt;<br /> Documentation / Notes&lt;/translate&gt;<br /> |-<br /> |imp<br /> |&lt;translate&gt;&lt;!--T:18--&gt;<br /> Improvement&lt;/translate&gt;<br /> |}<br /> <br /> &lt;translate&gt;&lt;!--T:19--&gt;<br /> A commit may have multiple prefixes. If that’s the case, each goes into its own brackets.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Title === &lt;!--T:20--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:21--&gt;<br /> Use a descriptive title for the commit. Usually the title of the PR will be fine.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Issue === &lt;!--T:22--&gt;&lt;/translate&gt;<br /> &lt;translate&gt;&lt;!--T:23--&gt;<br /> After the title we add a dot, followed by a text like “Closes #1234”. This will automatically close the PR when the commit is pushed to staging and also provides a link to the PR. See https://help.github.com/articles/closing-issues-via-commit-messages for the available keywords.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Description === &lt;!--T:24--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:25--&gt;<br /> The description is optional. It can contain additional information to the commit. Usually that is not needed as the information is available in the linked Pull Request.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Example === &lt;!--T:26--&gt;&lt;/translate&gt;<br /> <br /> :[lng] Clarify content smart search plugins. Closes #1833<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:27--&gt;<br /> [[Category:CMS Development Reference]]<br /> [[Category:CMS Maintainers]]<br /> [[Category:Guidelines]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Joomla:Commit_Guidelines&diff=198871 2015-06-30T12:12:51Z

<p>Bakual: Change lng to lang</p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> &lt;translate&gt;&lt;!--T:1--&gt;<br /> Commit Guidelines for the Joomla! CMS<br /> These guidelines are not meant to be strict rules, but a guide for what we consider best practice.&lt;/translate&gt;<br /> &lt;translate&gt;== Merge-Commit vs Squashing == &lt;!--T:2--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Merge-Commit === &lt;!--T:3--&gt;<br /> When you click the “Merge” button on GitHub, it will create a merge-commit named “Merge pull request #1234 from User/Branch”. This commit will show together with all commits in the PR in the log. Each commit will have the original date when it was created, not when it was actually merged. While this is nice to preserve the actual commit history and is fine with Git Clients which show the branches, it becomes unreadable especially on the GitHub log page.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Squashing === &lt;!--T:4--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:5--&gt;<br /> When you squash the commits, you create a single commit consisting of all original commits. This single commit is then pushed to master and can be named in a standardised way.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Recommendation === &lt;!--T:6--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:7--&gt;<br /> We recommend to squash the commits in most cases. The “Merge” button in GitHub should only be used for simple PRs with only a few commits and when it’s only a few days old. Most of time, this is the case for simple PRs dealing with codestyle or language strings.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;== Naming Conventions == &lt;!--T:8--&gt;<br /> When squashing commits, one should follow these naming conventions so the log will become easier to read.&lt;/translate&gt; <br /> <br /> &lt;translate&gt;=== Format === &lt;!--T:9--&gt;&lt;/translate&gt;<br /> <br /> :'''&lt;[Prefix]&gt; &lt;Title&gt;. &lt;Issue&gt;'''<br /> :&lt;''Description''&gt;<br /> <br /> &lt;translate&gt;=== Prefixes === &lt;!--T:10--&gt;&lt;/translate&gt;<br /> <br /> {| class=&quot;wikitable&quot;<br /> !&lt;translate&gt;&lt;!--T:11--&gt;<br /> Prefix&lt;/translate&gt;<br /> !&lt;translate&gt;&lt;!--T:12--&gt;<br /> Meaning&lt;/translate&gt;<br /> |-<br /> |sec<br /> |&lt;translate&gt;&lt;!--T:13--&gt;<br /> Security&lt;/translate&gt;<br /> |-<br /> |bug<br /> |&lt;translate&gt;&lt;!--T:14--&gt;<br /> Bug fix&lt;/translate&gt;<br /> |-<br /> |add<br /> |&lt;translate&gt;&lt;!--T:15--&gt;<br /> Add&lt;/translate&gt;<br /> |-<br /> |rem<br /> |&lt;translate&gt;&lt;!--T:16--&gt;<br /> Remove&lt;/translate&gt;<br /> |-<br /> |lang<br /> |Language<br /> |-<br /> |doc<br /> |&lt;translate&gt;&lt;!--T:17--&gt;<br /> Documentation / Notes&lt;/translate&gt;<br /> |-<br /> |imp<br /> |&lt;translate&gt;&lt;!--T:18--&gt;<br /> Improvement&lt;/translate&gt;<br /> |}<br /> <br /> &lt;translate&gt;&lt;!--T:19--&gt;<br /> A commit may have multiple prefixes. If that’s the case, each goes into its own brackets.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Title === &lt;!--T:20--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:21--&gt;<br /> Use a descriptive title for the commit. Usually the title of the PR will be fine.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Issue === &lt;!--T:22--&gt;&lt;/translate&gt;<br /> &lt;translate&gt;&lt;!--T:23--&gt;<br /> After the title we add a dot, followed by a text like “Closes #1234”. This will automatically close the PR when the commit is pushed to staging and also provides a link to the PR. See https://help.github.com/articles/closing-issues-via-commit-messages for the available keywords.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Description === &lt;!--T:24--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:25--&gt;<br /> The description is optional. It can contain additional information to the commit. Usually that is not needed as the information is available in the linked Pull Request.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;=== Example === &lt;!--T:26--&gt;&lt;/translate&gt;<br /> <br /> :[lng] Clarify content smart search plugins. Closes #1833<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:27--&gt;<br /> [[Category:CMS Development Reference]]<br /> [[Category:CMS Maintainers]]<br /> [[Category:Guidelines]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=J3.x:Joomla_Standard_Icomoon_Fonts&diff=195829 2015-06-23T11:42:09Z

<p>Bakual: Regenerated from plugin which added some missing slashes</p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> {{Joomla version|version=3.0.0|time=and later}}<br /> &lt;translate&gt;&lt;!--T:1--&gt;<br /> Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the &quot;Protostar&quot; (Frontend), &quot;Isis&quot; (Administrator) and &quot;Hathor&quot; (Administrator) Templates.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;== How to Use == &lt;!--T:2--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:3--&gt;<br /> Icon fonts can be called with a &lt;tt&gt;&lt;span class=&quot;icon-''name-of-icon''&quot;&amp;gt;&lt;/tt&gt; tag and a {space}. eg&lt;/translate&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;span class=&quot;icon-joomla&quot;&gt; &lt;/span&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:4--&gt;<br /> Will show the Joomla! icon:&lt;/translate&gt; &lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt;<br /> <br /> &lt;translate&gt;== Font Size == &lt;!--T:5--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:6--&gt;<br /> Because the icons are fonts, you can control the size of them with an added class or style= statement. Of course you will have to define the class in your .css or .less stylesheet file.&lt;/translate&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;span class=&quot;icon-joomla large-icon&quot;&gt; &lt;/span&gt;<br /> &lt;span class=&quot;icon-joomla&quot; style=&quot;font-size:24px;&quot;&gt; &lt;/span&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:7--&gt;<br /> Here is the resized Joomla! icon:&lt;/translate&gt; &lt;span class=&quot;icon-joomla&quot; style=&quot;font-size:24px;&quot;&gt;&amp;nbsp;&lt;/span&gt;<br /> <br /> &lt;translate&gt;== Available Icomoon Icons == &lt;!--T:8--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:9--&gt;<br /> This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below.&lt;/translate&gt;<br /> <br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; joomla&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-address&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; address&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-apply&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; apply / edit / pencil&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-archive&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; archive / drawer-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-first&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-first&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-last&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-last&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-attachment&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; attachment / paperclip / flag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; backward-2 / reply&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; backward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-ban-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; ban-circle / minus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bars&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bars&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-basket&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; basket&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-book&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; book&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bookmark&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bookmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-box-add&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; box-add&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-box-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; box-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-briefcase&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; briefcase&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-broadcast&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; broadcast / connection / wifi&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-brush&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; brush&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-camera&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; camera&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-camera-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; camera-2 / video&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cancel-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cancel-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-partial&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkbox-partial&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkbox-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkedout&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkedout / lock / locked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkin&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkin / checkbox / checkbox-checked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkmark-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-down&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-down / downarrow / arrow-down&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-left&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-left / leftarrow / arrow-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-right&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-right / rightarrow / arrow-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-up&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-up / uparrow / arrow-up&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-clock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; clock&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cogs&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cogs&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-comment&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; comment / comments&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-comments-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; comments-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-compass&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; compass&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-contract&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; contract&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-contract-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; contract-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-credit&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; credit&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-credit-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; credit-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cube&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cube&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-dashboard&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; dashboard&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-database&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; database&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-delete&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; delete / remove / cancel-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-download&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; download&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-enter&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; enter&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; envelope / mail&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope-opened&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; envelope-opened / mail-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-equalizer&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; equalizer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-exit&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; exit&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expand&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expand&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expand-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expand-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expired&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expired&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-close&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; eye-close / eye-blocked / eye-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-open&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; eye-open / eye&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-featured&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; featured / default / star&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-feed&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; feed&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-add&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-add / file-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-check&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-check&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-filter&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; filter&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-first&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; first&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-flag&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; flag&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-flag-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; flag-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-close&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-close / folder-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-open&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-open / folder&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; forward-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; forward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-grid&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; grid / grid-view&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-grid-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; grid-2 / grid-view-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-health&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; health&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-heart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; heart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-heart-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; heart-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-home&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; home&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-home-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; home-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-info&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; info&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-info-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; info-2 / info-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-key&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; key&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-lamp&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; lamp&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-last&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; last&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-lightning&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; lightning / flash&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-link&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; link&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-list&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; list / list-view&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-list-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; list-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-location&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; location&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-loop&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; loop&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; minus / not-ok&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-minus-sign&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; minus-sign / minus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-mobile&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; mobile&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-move&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; move&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-music&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; music&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-new&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; new / plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-next&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; next / forward&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-notification&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; notification&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-notification-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; notification-2 / notification-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-options&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; options / cog&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-out-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; out-2 / new-tab&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-out-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; out-3 / new-tab-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-palette&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; palette / color-palette&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-center&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-center&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-justify&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-justify&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-left&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-right&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pause&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pause&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pause-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pause-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pencil-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pencil-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pending&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pending / warning&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-phone&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; phone&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-phone-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; phone-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-picture&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; picture / image&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pictures&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pictures / images&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pie&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pie&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pin&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pin / pushpin&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play-2 / video-2 / youtube&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-plus-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; plus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-power-cord&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; power-cord&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-previous&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; previous / backward&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-print&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; print / printer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-publish&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; publish / save / ok / checkmark&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-purge&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; purge / trash&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-puzzle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; puzzle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-question&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; question / question-sign / help&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-question-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; question-2 / question-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote / quotes-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote-2 / quotes-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote-3 / bubble-quote&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-checked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; radio-checked / generic&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; radio-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-save-copy&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; save-copy / copy&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-save-new&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; save-new / plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-scissors&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; scissors&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-screen&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; screen&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-screwdriver&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; screwdriver / tools&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-search&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; search&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-share&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; share / redo&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-share-alt&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; share-alt / out&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-shield&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; shield&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-shuffle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; shuffle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-signup&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; signup&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley / smiley-happy&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-2 / smiley-happy-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-neutral&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-neutral-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-sad&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-sad-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-square&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; square&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stack&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stack&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-star-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; star-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stop&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stop&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stop-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stop-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-support&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; support&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-switch&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; switch&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tablet&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tablet&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tag&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tag&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tag-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tags&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tags&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tags-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tags-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-down&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; thumbs-down&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-up&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; thumbs-up&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tree&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tree&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tree-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tree-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unarchive&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unarchive / drawer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unblock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unblock / refresh / redo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-undo&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; undo&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-undo-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; undo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unfeatured&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unfeatured / asterisk / star-empty&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unlock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unlock&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unpublish&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unpublish / cancel&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-upload&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; upload&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-user&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; user&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-users&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; users&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-vcard&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; vcard&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-wand&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; wand&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-warning-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; warning-2 / warning-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-wrench&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; wrench&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-in&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; zoom-in&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-out&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; zoom-out&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> =&lt;translate&gt;= Including in Your Template == &lt;!--T:10--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:11--&gt;<br /> To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).&lt;/translate&gt;<br /> <br /> {{note|&lt;translate&gt;&lt;!--T:12--&gt;<br /> This section is incomplete.&lt;/translate&gt;}}<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:13--&gt;<br /> [[Category:CSS]]<br /> [[Category:Template Development]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=J3.x:Joomla_Standard_Icomoon_Fonts&diff=195828 2015-06-23T10:43:17Z

<p>Bakual: Added Hathor to the list of supporting templates</p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> {{Joomla version|version=3.0.0|time=and later}}<br /> &lt;translate&gt;&lt;!--T:1--&gt;<br /> Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the &quot;Protostar&quot; (Frontend), &quot;Isis&quot; (Administrator) and &quot;Hathor&quot; (Administrator) Templates.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;== How to Use == &lt;!--T:2--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:3--&gt;<br /> Icon fonts can be called with a &lt;tt&gt;&lt;span class=&quot;icon-''name-of-icon''&quot;&amp;gt;&lt;/tt&gt; tag and a {space}. eg&lt;/translate&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;span class=&quot;icon-joomla&quot;&gt; &lt;/span&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:4--&gt;<br /> Will show the Joomla! icon:&lt;/translate&gt; &lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt;<br /> <br /> &lt;translate&gt;== Font Size == &lt;!--T:5--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:6--&gt;<br /> Because the icons are fonts, you can control the size of them with an added class or style= statement. Of course you will have to define the class in your .css or .less stylesheet file.&lt;/translate&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;span class=&quot;icon-joomla large-icon&quot;&gt; &lt;/span&gt;<br /> &lt;span class=&quot;icon-joomla&quot; style=&quot;font-size:24px;&quot;&gt; &lt;/span&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:7--&gt;<br /> Here is the resized Joomla! icon:&lt;/translate&gt; &lt;span class=&quot;icon-joomla&quot; style=&quot;font-size:24px;&quot;&gt;&amp;nbsp;&lt;/span&gt;<br /> <br /> &lt;translate&gt;== Available Icomoon Icons == &lt;!--T:8--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:9--&gt;<br /> This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below.&lt;/translate&gt;<br /> <br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; joomla&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-address&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; address&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-apply&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; apply / edit / pencil&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-archive&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; archive / drawer-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-first&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-first&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-last&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-last&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-attachment&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; attachment / paperclip / flag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; backward-2 / reply&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; backward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-ban-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; ban-circle / minus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bars&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bars&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-basket&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; basket&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-book&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; book&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bookmark&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bookmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-box-add&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; box-add&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-box-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; box-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-briefcase&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; briefcase&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-broadcast&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; broadcast / connection / wifi&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-brush&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; brush&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-camera&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; camera&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-camera-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; camera-2 video&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cancel-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cancel-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-partial&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkbox-partial&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkbox-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkedout&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkedout / lock / locked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkin&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkin / checkbox / checkbox-checked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkmark-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-down&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-down / downarrow / arrow-down&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-left&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-left / leftarrow / arrow-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-right&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-right / rightarrow / arrow-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-up&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-up / uparrow / arrow-up&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-clock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; clock&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cogs&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cogs&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-comment&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; comment / comments&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-comments-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; comments-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-compass&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; compass&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-contract&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; contract&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-contract-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; contract-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-credit&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; credit&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-credit-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; credit-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cube&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cube&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-dashboard&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; dashboard&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-database&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; database&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-delete&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; delete / remove / cancel-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-download&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; download&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-enter&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; enter&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; envelope / mail&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope-opened&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; envelope-opened / mail-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-equalizer&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; equalizer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-exit&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; exit&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expand&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expand&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expand-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expand-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expired&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expired&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-close&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; eye-close / eye-blocked / eye-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-open&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; eye-open / eye&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-featured&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; featured / default / star&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-feed&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; feed&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-add&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-add / file-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-check&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-check&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-filter&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; filter&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-first&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; first&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-flag&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; flag&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-flag-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; flag-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-close&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-close / folder-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-open&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-open / folder&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; forward-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; forward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-grid&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; grid / grid-view&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-grid-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; grid-2 / grid-view-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-health&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; health&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-heart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; heart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-heart-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; heart-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-home&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; home&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-home-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; home-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-info&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; info&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-info-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; info-2 info-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-key&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; key&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-lamp&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; lamp&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-last&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; last&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-lightning&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; lightning / flash&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-link&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; link&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-list&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; list / list-view&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-list-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; list-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-location&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; location&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-loop&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; loop&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; minus / not-ok&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-minus-sign&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; minus-sign / minus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-mobile&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; mobile&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-move&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; move&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-music&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; music&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-new&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; new plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-next&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; next forward&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-notification&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; notification&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-notification-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; notification-2 / notification-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-options&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; options / cog&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-out-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; out-2 / new-tab&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-out-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; out-3 / new-tab-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-palette&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; palette / color-palette&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-center&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-center&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-justify&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-justify&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-left&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-right&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pause&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pause&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pause-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pause-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pencil-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pencil-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pending&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pending / warning&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-phone&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; phone&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-phone-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; phone-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-picture&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; picture / image&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pictures&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pictures / images&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pie&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pie&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pin&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pin / pushpin&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play-2 / video-2 / youtube&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-plus-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; plus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-power-cord&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; power-cord&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-previous&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; previous / backward&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-print&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; print / printer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-publish&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; publish / save / ok / checkmark&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-purge&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; purge / trash&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-puzzle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; puzzle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-question&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; question / question-sign / help&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-question-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; question-2 / question-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote / quotes-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote-2 / quotes-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote-3 / bubble-quote&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-checked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; radio-checked / generic&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; radio-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-save-copy&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; save-copy / copy&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-save-new&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; save-new / plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-scissors&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; scissors&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-screen&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; screen&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-screwdriver&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; screwdriver / tools&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-search&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; search&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-share&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; share / redo&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-share-alt&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; share-alt / out&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-shield&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; shield&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-shuffle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; shuffle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-signup&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; signup&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley / smiley-happy&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-2 / smiley-happy-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-neutral&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-neutral-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-sad&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-sad-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-square&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; square&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stack&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stack&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-star-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; star-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stop&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stop&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stop-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stop-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-support&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; support&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-switch&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; switch&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tablet&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tablet&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tag&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tag&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tag-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tags&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tags&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tags-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tags-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-down&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; thumbs-down&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-up&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; thumbs-up&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tree&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tree&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tree-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tree-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unarchive&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unarchive / drawer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unblock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unblock / refresh / redo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-undo&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; undo&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-undo-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; undo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unfeatured&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unfeatured / asterisk / star-empty&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unlock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unlock&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unpublish&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unpublish / cancel&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-upload&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; upload&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-user&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; user&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-users&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; users&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-vcard&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; vcard&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-wand&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; wand&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-warning-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; warning-2 / warning-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-wrench&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; wrench&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-in&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; zoom-in&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-out&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; zoom-out&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> =&lt;translate&gt;= Including in Your Template == &lt;!--T:10--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:11--&gt;<br /> To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).&lt;/translate&gt;<br /> <br /> {{note|&lt;translate&gt;&lt;!--T:12--&gt;<br /> This section is incomplete.&lt;/translate&gt;}}<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:13--&gt;<br /> [[Category:CSS]]<br /> [[Category:Template Development]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=J3.x:Joomla_Standard_Icomoon_Fonts&diff=195827 2015-06-23T10:40:29Z

<p>Bakual: Added location of icomoon.css stylesheet</p> <hr /> <div>&lt;noinclude&gt;&lt;languages /&gt;&lt;/noinclude&gt;<br /> {{Joomla version|version=3.0.0|time=and later}}<br /> &lt;translate&gt;&lt;!--T:1--&gt;<br /> Since Joomla 3.0.0, the Joomla! CMS comes with its own custom [https://icomoon.io/ Icomoon Font Set]. These icon fonts are available by default for use in the &quot;Protostar&quot; (Frontend) and &quot;Isis&quot; (Administrator) Templates.&lt;/translate&gt;<br /> <br /> &lt;translate&gt;== How to Use == &lt;!--T:2--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:3--&gt;<br /> Icon fonts can be called with a &lt;tt&gt;&lt;span class=&quot;icon-''name-of-icon''&quot;&amp;gt;&lt;/tt&gt; tag and a {space}. eg&lt;/translate&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;span class=&quot;icon-joomla&quot;&gt; &lt;/span&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:4--&gt;<br /> Will show the Joomla! icon:&lt;/translate&gt; &lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt;<br /> <br /> &lt;translate&gt;== Font Size == &lt;!--T:5--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:6--&gt;<br /> Because the icons are fonts, you can control the size of them with an added class or style= statement. Of course you will have to define the class in your .css or .less stylesheet file.&lt;/translate&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;span class=&quot;icon-joomla large-icon&quot;&gt; &lt;/span&gt;<br /> &lt;span class=&quot;icon-joomla&quot; style=&quot;font-size:24px;&quot;&gt; &lt;/span&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:7--&gt;<br /> Here is the resized Joomla! icon:&lt;/translate&gt; &lt;span class=&quot;icon-joomla&quot; style=&quot;font-size:24px;&quot;&gt;&amp;nbsp;&lt;/span&gt;<br /> <br /> &lt;translate&gt;== Available Icomoon Icons == &lt;!--T:8--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:9--&gt;<br /> This is the complete list, including the alternative names to call the icon. The alternatives are separated by a '/' below.&lt;/translate&gt;<br /> <br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; joomla&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-address&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; address&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-apply&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; apply / edit / pencil&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-archive&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; archive / drawer-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-down-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-first&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-first&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-last&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-last&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-left-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-right-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-4&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; arrow-up-4&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-attachment&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; attachment / paperclip / flag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; backward-2 / reply&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; backward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-ban-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; ban-circle / minus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bars&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bars&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-basket&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; basket&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-book&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; book&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bookmark&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; bookmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-box-add&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; box-add&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-box-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; box-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-briefcase&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; briefcase&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-broadcast&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; broadcast / connection / wifi&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-brush&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; brush&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; calendar-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-camera&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; camera&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-camera-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; camera-2 video&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cancel-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cancel-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-partial&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkbox-partial&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkbox-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkedout&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkedout / lock / locked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkin&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkin / checkbox / checkbox-checked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; checkmark-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-down&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-down / downarrow / arrow-down&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-left&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-left / leftarrow / arrow-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-right&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-right / rightarrow / arrow-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-up&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; chevron-up / uparrow / arrow-up&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-clock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; clock&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cogs&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cogs&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-comment&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; comment / comments&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-comments-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; comments-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-compass&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; compass&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-contract&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; contract&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-contract-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; contract-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-credit&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; credit&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-credit-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; credit-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-cube&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; cube&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-dashboard&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; dashboard&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-database&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; database&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-delete&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; delete / remove / cancel-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-download&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; download&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-enter&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; enter&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; envelope / mail&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope-opened&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; envelope-opened / mail-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-equalizer&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; equalizer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-exit&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; exit&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expand&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expand&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expand-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expand-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-expired&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; expired&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-close&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; eye-close / eye-blocked / eye-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-open&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; eye-open / eye&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-featured&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; featured / default / star&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-feed&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; feed&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-add&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-add / file-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-check&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-check&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-file-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; file-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-filter&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; filter&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-first&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; first&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-flag&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; flag&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-flag-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; flag-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-close&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-close / folder-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-open&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-open / folder&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-remove&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; folder-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; forward-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; forward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-grid&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; grid / grid-view&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-grid-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; grid-2 / grid-view-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-health&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; health&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-heart&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; heart&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-heart-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; heart-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-home&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; home&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-home-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; home-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-info&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; info&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-info-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; info-2 info-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-key&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; key&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-lamp&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; lamp&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-last&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; last&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-lightning&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; lightning / flash&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-link&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; link&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-list&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; list / list-view&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-list-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; list-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-location&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; location&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-loop&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; loop&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; menu-3&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-minus&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; minus / not-ok&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-minus-sign&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; minus-sign / minus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-mobile&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; mobile&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-move&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; move&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-music&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; music&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-new&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; new plus&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-next&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; next forward&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-notification&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; notification&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-notification-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; notification-2 / notification-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-options&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; options / cog&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-out-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; out-2 / new-tab&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-out-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; out-3 / new-tab-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-palette&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; palette / color-palette&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-center&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-center&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-justify&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-justify&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-left&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-right&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; paragraph-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pause&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pause&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pause-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pause-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pencil-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pencil-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pending&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pending / warning&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-phone&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; phone&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-phone-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; phone-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-picture&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; picture / image&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pictures&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pictures / images&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pie&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pie&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-pin&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; pin / pushpin&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play-2 / video-2 / youtube&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-play-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; play-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-plus-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; plus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-power-cord&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; power-cord&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-previous&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; previous / backward&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-print&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; print / printer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-publish&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; publish / save / ok / checkmark&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-purge&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; purge / trash&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-puzzle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; puzzle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-question&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; question / question-sign / help&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-question-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; question-2 / question-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote / quotes-left&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote-2 / quotes-right&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-3&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; quote-3 / bubble-quote&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-checked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; radio-checked / generic&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; radio-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-save-copy&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; save-copy / copy&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-save-new&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; save-new / plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-scissors&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; scissors&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-screen&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; screen&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-screwdriver&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; screwdriver / tools&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-search&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; search&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-share&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; share / redo&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-share-alt&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; share-alt / out&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-shield&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; shield&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-shuffle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; shuffle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-signup&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; signup&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley / smiley-happy&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-2 / smiley-happy-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-neutral&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-neutral-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-sad&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; smiley-sad-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-square&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; square&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stack&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stack&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-star-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; star-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stop&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stop&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-stop-circle&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; stop-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-support&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; support&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-switch&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; switch&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tablet&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tablet&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tag&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tag&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tag-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tags&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tags&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tags-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tags-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-down&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; thumbs-down&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-up&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; thumbs-up&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tree&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tree&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-tree-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; tree-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unarchive&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unarchive / drawer&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unblock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unblock / refresh / redo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-undo&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; undo&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-undo-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; undo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unfeatured&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unfeatured / asterisk / star-empty&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unlock&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unlock&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-unpublish&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; unpublish / cancel&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-upload&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; upload&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-user&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; user&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-users&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; users&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-vcard&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; vcard&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-wand&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; wand&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-warning-2&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; warning-2 / warning-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-wrench&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; wrench&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-in&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; zoom-in&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-out&quot;&gt;&amp;nbsp;&lt;/span&gt;&amp;nbsp; zoom-out&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> =&lt;translate&gt;= Including in Your Template == &lt;!--T:10--&gt;&lt;/translate&gt;<br /> <br /> &lt;translate&gt;&lt;!--T:11--&gt;<br /> To include the Icomoon fonts in your template you will have to add the css stylesheet (/media/jui/css/icomoon.css) or include it in your .less file when you generate the .css stylesheet(s).&lt;/translate&gt;<br /> <br /> {{note|&lt;translate&gt;&lt;!--T:12--&gt;<br /> This section is incomplete.&lt;/translate&gt;}}<br /> <br /> &lt;noinclude&gt;<br /> &lt;translate&gt;<br /> &lt;!--T:13--&gt;<br /> [[Category:CSS]]<br /> [[Category:Template Development]]<br /> &lt;/translate&gt;<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=J3.x:Joomla_Standard_Icomoon_Fonts&diff=194524 2015-06-19T20:07:45Z

<p>Bakual: Added slashes between the class names. Moved each icon to its own line</p> <hr /> <div>&lt;div class=&quot;icomoon-list&quot;&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-joomla&quot;&gt;&amp;nbsp;&lt;/span&gt; joomla&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-up&quot;&gt;&amp;nbsp;&lt;/span&gt; chevron-up / uparrow / arrow-up&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-right&quot;&gt;&amp;nbsp;&lt;/span&gt; chevron-right / rightarrow / arrow-right&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-down&quot;&gt;&amp;nbsp;&lt;/span&gt; chevron-down / downarrow / arrow-down&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-chevron-left&quot;&gt;&amp;nbsp;&lt;/span&gt; chevron-left / leftarrow / arrow-left&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-first&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-first&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-last&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-last&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-2&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-up-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-2&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-right-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-2&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-down-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-2&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-left-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-3&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-up-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-3&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-right-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-3&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-down-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-3&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-left-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-2&quot;&gt;&amp;nbsp;&lt;/span&gt; menu-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-up-4&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-up-4&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-right-4&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-right-4&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-down-4&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-down-4&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-arrow-left-4&quot;&gt;&amp;nbsp;&lt;/span&gt; arrow-left-4&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-share&quot;&gt;&amp;nbsp;&lt;/span&gt; share / redo&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-undo&quot;&gt;&amp;nbsp;&lt;/span&gt; undo&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-2&quot;&gt;&amp;nbsp;&lt;/span&gt; forward-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-2&quot;&gt;&amp;nbsp;&lt;/span&gt; backward-2 / reply&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-unblock&quot;&gt;&amp;nbsp;&lt;/span&gt; unblock / refresh / redo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-undo-2&quot;&gt;&amp;nbsp;&lt;/span&gt; undo-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-move&quot;&gt;&amp;nbsp;&lt;/span&gt; move&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-expand&quot;&gt;&amp;nbsp;&lt;/span&gt; expand&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-contract&quot;&gt;&amp;nbsp;&lt;/span&gt; contract&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-expand-2&quot;&gt;&amp;nbsp;&lt;/span&gt; expand-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-contract-2&quot;&gt;&amp;nbsp;&lt;/span&gt; contract-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-play&quot;&gt;&amp;nbsp;&lt;/span&gt; play&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pause&quot;&gt;&amp;nbsp;&lt;/span&gt; pause&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-stop&quot;&gt;&amp;nbsp;&lt;/span&gt; stop&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-previous&quot;&gt;&amp;nbsp;&lt;/span&gt; previous / backward&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-next&quot;&gt;&amp;nbsp;&lt;/span&gt; next / forward&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-first&quot;&gt;&amp;nbsp;&lt;/span&gt; first&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-last&quot;&gt;&amp;nbsp;&lt;/span&gt; last&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-play-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; play-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pause-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; pause-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-stop-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; stop-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-backward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; backward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-forward-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; forward-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-loop&quot;&gt;&amp;nbsp;&lt;/span&gt; loop&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-shuffle&quot;&gt;&amp;nbsp;&lt;/span&gt; shuffle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-search&quot;&gt;&amp;nbsp;&lt;/span&gt; search&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-in&quot;&gt;&amp;nbsp;&lt;/span&gt; zoom-in&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-zoom-out&quot;&gt;&amp;nbsp;&lt;/span&gt; zoom-out&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-apply&quot;&gt;&amp;nbsp;&lt;/span&gt; apply / edit / pencil&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pencil-2&quot;&gt;&amp;nbsp;&lt;/span&gt; pencil-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-brush&quot;&gt;&amp;nbsp;&lt;/span&gt; brush&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-save-new&quot;&gt;&amp;nbsp;&lt;/span&gt; save-new / plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-minus-sign&quot;&gt;&amp;nbsp;&lt;/span&gt; minus-sign / minus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-delete&quot;&gt;&amp;nbsp;&lt;/span&gt; delete / remove / cancel-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-publish&quot;&gt;&amp;nbsp;&lt;/span&gt; publish / save / ok / checkmark&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-new&quot;&gt;&amp;nbsp;&lt;/span&gt; new / plus&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-plus-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; plus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-minus&quot;&gt;&amp;nbsp;&lt;/span&gt; minus / not-ok&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-ban-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; ban-circle / minus-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-unpublish&quot;&gt;&amp;nbsp;&lt;/span&gt; unpublish / cancel&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-cancel-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; cancel-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt; checkmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-checkmark-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; checkmark-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-info&quot;&gt;&amp;nbsp;&lt;/span&gt; info&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-info-2&quot;&gt;&amp;nbsp;&lt;/span&gt; info-2 / info-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-question&quot;&gt;&amp;nbsp;&lt;/span&gt; question / question-sign / help&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-question-2&quot;&gt;&amp;nbsp;&lt;/span&gt; question-2 / question-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-notification&quot;&gt;&amp;nbsp;&lt;/span&gt; notification&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-notification-2&quot;&gt;&amp;nbsp;&lt;/span&gt; notification-2 / notification-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pending&quot;&gt;&amp;nbsp;&lt;/span&gt; pending / warning&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-warning-2&quot;&gt;&amp;nbsp;&lt;/span&gt; warning-2 / warning-circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt; checkbox-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-checkin&quot;&gt;&amp;nbsp;&lt;/span&gt; checkin / checkbox / checkbox-checked&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-checkbox-partial&quot;&gt;&amp;nbsp;&lt;/span&gt; checkbox-partial&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-square&quot;&gt;&amp;nbsp;&lt;/span&gt; square&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-unchecked&quot;&gt;&amp;nbsp;&lt;/span&gt; radio-unchecked&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-radio-checked&quot;&gt;&amp;nbsp;&lt;/span&gt; radio-checked / generic&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-circle&quot;&gt;&amp;nbsp;&lt;/span&gt; circle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-signup&quot;&gt;&amp;nbsp;&lt;/span&gt; signup&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-grid&quot;&gt;&amp;nbsp;&lt;/span&gt; grid / grid-view&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-grid-2&quot;&gt;&amp;nbsp;&lt;/span&gt; grid-2 / grid-view-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-menu&quot;&gt;&amp;nbsp;&lt;/span&gt; menu&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-list&quot;&gt;&amp;nbsp;&lt;/span&gt; list / list-view&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-list-2&quot;&gt;&amp;nbsp;&lt;/span&gt; list-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-menu-3&quot;&gt;&amp;nbsp;&lt;/span&gt; menu-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-open&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-open / folder&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-close&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-close / folder-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-minus&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-3&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-plus-2&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-plus-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-folder-remove&quot;&gt;&amp;nbsp;&lt;/span&gt; folder-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-file&quot;&gt;&amp;nbsp;&lt;/span&gt; file&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-file-2&quot;&gt;&amp;nbsp;&lt;/span&gt; file-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-file-add&quot;&gt;&amp;nbsp;&lt;/span&gt; file-add / file-plus&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-file-minus&quot;&gt;&amp;nbsp;&lt;/span&gt; file-minus&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-file-check&quot;&gt;&amp;nbsp;&lt;/span&gt; file-check&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-file-remove&quot;&gt;&amp;nbsp;&lt;/span&gt; file-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-save-copy&quot;&gt;&amp;nbsp;&lt;/span&gt; save-copy / copy&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-stack&quot;&gt;&amp;nbsp;&lt;/span&gt; stack&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tree&quot;&gt;&amp;nbsp;&lt;/span&gt; tree&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tree-2&quot;&gt;&amp;nbsp;&lt;/span&gt; tree-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-left&quot;&gt;&amp;nbsp;&lt;/span&gt; paragraph-left&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-center&quot;&gt;&amp;nbsp;&lt;/span&gt; paragraph-center&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-right&quot;&gt;&amp;nbsp;&lt;/span&gt; paragraph-right&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-paragraph-justify&quot;&gt;&amp;nbsp;&lt;/span&gt; paragraph-justify&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-screen&quot;&gt;&amp;nbsp;&lt;/span&gt; screen&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tablet&quot;&gt;&amp;nbsp;&lt;/span&gt; tablet&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-mobile&quot;&gt;&amp;nbsp;&lt;/span&gt; mobile&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-box-add&quot;&gt;&amp;nbsp;&lt;/span&gt; box-add&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-box-remove&quot;&gt;&amp;nbsp;&lt;/span&gt; box-remove&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-download&quot;&gt;&amp;nbsp;&lt;/span&gt; download&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-upload&quot;&gt;&amp;nbsp;&lt;/span&gt; upload&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-home&quot;&gt;&amp;nbsp;&lt;/span&gt; home&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-home-2&quot;&gt;&amp;nbsp;&lt;/span&gt; home-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-out-2&quot;&gt;&amp;nbsp;&lt;/span&gt; out-2 / new-tab&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-out-3&quot;&gt;&amp;nbsp;&lt;/span&gt; out-3 / new-tab-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-link&quot;&gt;&amp;nbsp;&lt;/span&gt; link&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-picture&quot;&gt;&amp;nbsp;&lt;/span&gt; picture / image&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pictures&quot;&gt;&amp;nbsp;&lt;/span&gt; pictures / images&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-palette&quot;&gt;&amp;nbsp;&lt;/span&gt; palette / color-palette&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-camera&quot;&gt;&amp;nbsp;&lt;/span&gt; camera&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-camera-2&quot;&gt;&amp;nbsp;&lt;/span&gt; camera-2 / video&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-play-2&quot;&gt;&amp;nbsp;&lt;/span&gt; play-2 / video-2 / youtube&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-music&quot;&gt;&amp;nbsp;&lt;/span&gt; music&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-user&quot;&gt;&amp;nbsp;&lt;/span&gt; user&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-users&quot;&gt;&amp;nbsp;&lt;/span&gt; users&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-vcard&quot;&gt;&amp;nbsp;&lt;/span&gt; vcard&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-address&quot;&gt;&amp;nbsp;&lt;/span&gt; address&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-share-alt&quot;&gt;&amp;nbsp;&lt;/span&gt; share-alt / out&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-enter&quot;&gt;&amp;nbsp;&lt;/span&gt; enter&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-exit&quot;&gt;&amp;nbsp;&lt;/span&gt; exit&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-comment&quot;&gt;&amp;nbsp;&lt;/span&gt; comment / comments&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-comments-2&quot;&gt;&amp;nbsp;&lt;/span&gt; comments-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-quote&quot;&gt;&amp;nbsp;&lt;/span&gt; quote / quotes-left&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-2&quot;&gt;&amp;nbsp;&lt;/span&gt; quote-2 / quotes-right&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-quote-3&quot;&gt;&amp;nbsp;&lt;/span&gt; quote-3 / bubble-quote&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-phone&quot;&gt;&amp;nbsp;&lt;/span&gt; phone&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-phone-2&quot;&gt;&amp;nbsp;&lt;/span&gt; phone-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope&quot;&gt;&amp;nbsp;&lt;/span&gt; envelope / mail&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-envelope-opened&quot;&gt;&amp;nbsp;&lt;/span&gt; envelope-opened / mail-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-unarchive&quot;&gt;&amp;nbsp;&lt;/span&gt; unarchive / drawer&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-archive&quot;&gt;&amp;nbsp;&lt;/span&gt; archive / drawer-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-briefcase&quot;&gt;&amp;nbsp;&lt;/span&gt; briefcase&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tag&quot;&gt;&amp;nbsp;&lt;/span&gt; tag&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tag-2&quot;&gt;&amp;nbsp;&lt;/span&gt; tag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tags&quot;&gt;&amp;nbsp;&lt;/span&gt; tags&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-tags-2&quot;&gt;&amp;nbsp;&lt;/span&gt; tags-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-options&quot;&gt;&amp;nbsp;&lt;/span&gt; options / cog&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-cogs&quot;&gt;&amp;nbsp;&lt;/span&gt; cogs&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-screwdriver&quot;&gt;&amp;nbsp;&lt;/span&gt; screwdriver / tools&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-wrench&quot;&gt;&amp;nbsp;&lt;/span&gt; wrench&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-equalizer&quot;&gt;&amp;nbsp;&lt;/span&gt; equalizer&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-dashboard&quot;&gt;&amp;nbsp;&lt;/span&gt; dashboard&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-switch&quot;&gt;&amp;nbsp;&lt;/span&gt; switch&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-filter&quot;&gt;&amp;nbsp;&lt;/span&gt; filter&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-purge&quot;&gt;&amp;nbsp;&lt;/span&gt; purge / trash&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-checkedout&quot;&gt;&amp;nbsp;&lt;/span&gt; checkedout / lock / locked&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-unlock&quot;&gt;&amp;nbsp;&lt;/span&gt; unlock&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-key&quot;&gt;&amp;nbsp;&lt;/span&gt; key&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-support&quot;&gt;&amp;nbsp;&lt;/span&gt; support&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-database&quot;&gt;&amp;nbsp;&lt;/span&gt; database&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-scissors&quot;&gt;&amp;nbsp;&lt;/span&gt; scissors&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-health&quot;&gt;&amp;nbsp;&lt;/span&gt; health&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-wand&quot;&gt;&amp;nbsp;&lt;/span&gt; wand&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-open&quot;&gt;&amp;nbsp;&lt;/span&gt; eye-open / eye&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-eye-close&quot;&gt;&amp;nbsp;&lt;/span&gt; eye-close / eye-blocked / eye-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-clock&quot;&gt;&amp;nbsp;&lt;/span&gt; clock&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-compass&quot;&gt;&amp;nbsp;&lt;/span&gt; compass&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-broadcast&quot;&gt;&amp;nbsp;&lt;/span&gt; broadcast / connection / wifi&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-book&quot;&gt;&amp;nbsp;&lt;/span&gt; book&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-lightning&quot;&gt;&amp;nbsp;&lt;/span&gt; lightning / flash&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-print&quot;&gt;&amp;nbsp;&lt;/span&gt; print / printer&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-feed&quot;&gt;&amp;nbsp;&lt;/span&gt; feed&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar&quot;&gt;&amp;nbsp;&lt;/span&gt; calendar&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-2&quot;&gt;&amp;nbsp;&lt;/span&gt; calendar-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-calendar-3&quot;&gt;&amp;nbsp;&lt;/span&gt; calendar-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pie&quot;&gt;&amp;nbsp;&lt;/span&gt; pie&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-bars&quot;&gt;&amp;nbsp;&lt;/span&gt; bars&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-chart&quot;&gt;&amp;nbsp;&lt;/span&gt; chart&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-power-cord&quot;&gt;&amp;nbsp;&lt;/span&gt; power-cord&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-cube&quot;&gt;&amp;nbsp;&lt;/span&gt; cube&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-puzzle&quot;&gt;&amp;nbsp;&lt;/span&gt; puzzle&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-attachment&quot;&gt;&amp;nbsp;&lt;/span&gt; attachment / paperclip / flag-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-lamp&quot;&gt;&amp;nbsp;&lt;/span&gt; lamp&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-pin&quot;&gt;&amp;nbsp;&lt;/span&gt; pin / pushpin&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-location&quot;&gt;&amp;nbsp;&lt;/span&gt; location&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-shield&quot;&gt;&amp;nbsp;&lt;/span&gt; shield&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-flag&quot;&gt;&amp;nbsp;&lt;/span&gt; flag&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-flag-3&quot;&gt;&amp;nbsp;&lt;/span&gt; flag-3&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark&quot;&gt;&amp;nbsp;&lt;/span&gt; bookmark&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-bookmark-2&quot;&gt;&amp;nbsp;&lt;/span&gt; bookmark-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-heart&quot;&gt;&amp;nbsp;&lt;/span&gt; heart&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-heart-2&quot;&gt;&amp;nbsp;&lt;/span&gt; heart-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-up&quot;&gt;&amp;nbsp;&lt;/span&gt; thumbs-up&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-thumbs-down&quot;&gt;&amp;nbsp;&lt;/span&gt; thumbs-down&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-unfeatured&quot;&gt;&amp;nbsp;&lt;/span&gt; unfeatured / asterisk / star-empty&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-star-2&quot;&gt;&amp;nbsp;&lt;/span&gt; star-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-featured&quot;&gt;&amp;nbsp;&lt;/span&gt; featured / default / star&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley&quot;&gt;&amp;nbsp;&lt;/span&gt; smiley / smiley-happy&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-2&quot;&gt;&amp;nbsp;&lt;/span&gt; smiley-2 / smiley-happy-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad&quot;&gt;&amp;nbsp;&lt;/span&gt; smiley-sad&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-sad-2&quot;&gt;&amp;nbsp;&lt;/span&gt; smiley-sad-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral&quot;&gt;&amp;nbsp;&lt;/span&gt; smiley-neutral&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-smiley-neutral-2&quot;&gt;&amp;nbsp;&lt;/span&gt; smiley-neutral-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-cart&quot;&gt;&amp;nbsp;&lt;/span&gt; cart&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-basket&quot;&gt;&amp;nbsp;&lt;/span&gt; basket&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-credit&quot;&gt;&amp;nbsp;&lt;/span&gt; credit&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-credit-2&quot;&gt;&amp;nbsp;&lt;/span&gt; credit-2&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;&lt;span class=&quot;icon-expired&quot;&gt;&amp;nbsp;&lt;/span&gt; expired&lt;/div&gt;<br /> &lt;/div&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=SQL_Optimisation_Working_Group&diff=133019 2014-11-12T20:00:21Z

<p>Bakual: /* Team Members */ Added Steven Pignataro</p> <hr /> <div>== Team Members ==<br /> <br /> * Nadeeshaan Gunasinghe<br /> * [[User:Gunjanpatel|Gunjan Patel]] (Working Group Coordinator)<br /> * Thomas Hunziker (PLT Contact: thomas.hunziker at joomla.org)<br /> * Nicola Galgano<br /> * Eli Aschkenasy<br /> * Mrunal Pittalia<br /> * Steven Pignataro<br /> <br /> == Goal of the Project ==<br /> <br /> ''Joomla!, being one of the top content management systems in the world, is constantly faced with stiff competition. Often times what is considered important about any CMS are the enhancements and the feature sets a specific CMS has. There is another (sometimes overlooked) important fact which we need to pay attention to as we consider the end-user’s needs, which is the speed of the software. This depends on a multitude of factors but the top-most bottleneck is often the database management system and the way we use it to store and retrieve data.''<br /> <br /> In the SQL optimization working group we are mainly focused on the above mentioned fact. Our vision is to provide the community a faster way in which the CMS interacts with the DB by reducing the database management system based overheads.<br /> <br /> You can see the foundation of our work group idea here, [[GSOC_2014_Project_Ideas#Project:_SQL_Optimization|GSOC 2014 Project: SQL Optimization]]<br /> <br /> == Current Status ==<br /> <br /> * We have started this project as a Google Summer of Code SQL Optimisation Project https://www.google-melange.com/gsoc/project/details/google/gsoc2014/nadeeshaan/5657382461898752<br /> * Sent Pull Request on Joomla-CMS which can be found here https://github.com/joomla/joomla-cms/pulls/nadeeshaan<br /> <br /> == The immediate areas we focused on were: ==<br /> <br /> * Categories related query optimization<br /> * Articles related query optimization<br /> * Tags, menus, languages related optimization<br /> * Nested set optimization as a research project<br /> <br /> :Based on the above criteria we have submitted optimization work to the community and the current work can be seen at https://github.com/nadeeshaan/JGSoC-SQL-Optimisation . In the future we are planning to move this project to https://github.com/joomla-projects/GSoC-SQL-Optimization to ensure continuation of this work.<br /> <br /> == Roadmap &amp; Future Plans ==<br /> <br /> :We are focused to improve the Joomla database performance as well as the database access performance by efforts such as query refactoring and re-engineering. As our main target we are hoping to give a major priority for the schema redesign and also the nested sets optimization. At the moment we have laid the groundwork for the nested-set optimization but there is a lot more refactoring to be done.<br /> :In addition we are planning to improve the Joomla! Debug Plugin to measure previous query time and time difference between old and new queries.<br /> <br /> '''Following are the main areas that still need extensive work:''' <br /> <br /> * Nested sets database schema redesign<br /> * Debug Plugin improvement to measure query performance <br /> * Find the rest of the huge queries and bottleneck of the software regarding performance <br /> * Optimise queries of different views<br /> <br /> == Joomla! 4 SQL Optimization Plan ==<br /> While we currently focus mainly on optimizing existing queries it is important to understand that we’re extremely limited due to backwards compatibility requirements. It is our hope that for Joomla! 4 the DB schema can be revisited and perhaps totally re-written. F0F has internally implemented various DB functions (specifically in the nested-sets area) that should be part of how core joomla tables are accessed.<br /> <br /> [[Category:Working Groups]]<br /> [[Category:PLT]]</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Template_Code_Comparison_of_J1.5_and_J3.x&diff=130529 2014-10-31T15:23:48Z

<p>Bakual: Adjusted input filters to match type. Changed getCfg to get because it&#039;s deprecated.</p> <hr /> <div>The table below is a quick reference of code differences between a Joomla 1.5 and Joomla 3.x template's &lt;code&gt;index.php&lt;/code&gt; file.<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! '''Description'''<br /> ! '''In a 1.5 Template(index.php)''' you might see<br /> ! '''Recommended J3.x Template(index.php) code'''<br /> |-<br /> | First Line<br /> | &lt;code&gt;&lt;?php defined( '_JEXEC' ) or die( 'Restricted access' );?&gt;&lt;/code&gt; <br /> | '''No change'''<br /> |-<br /> | DOCTYPE<br /> | &lt;pre&gt;&lt;?php echo '&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?'.'&gt;'; ?&gt;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br /> &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; dir=&quot;&lt;?php echo $this-&gt;direction; ?&gt;&quot; &gt;&lt;/pre&gt;<br /> |&lt;pre&gt;&lt;!DOCTYPE html&gt;<br /> &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; dir=&quot;&lt;?php echo $this-&gt;direction; ?&gt;&quot;&gt;&lt;/pre&gt;<br /> |-<br /> | Access to Joomla Framework<br /> | &lt;pre&gt;$app = JFactory::getApplication(); OR <br /> require_once (‘includes/../framework.php' );<br /> $mainframe =&amp; JFactory::getApplication('site');&lt;/pre&gt;<br /> | '''No change''' but needs to look like this: <br /> &lt;pre&gt;$app = JFactory::getApplication();&lt;/pre&gt;<br /> |-<br /> | Retreive HTML headers from Joomla<br /> | &lt;pre&gt;&lt;jdoc:include type=&quot;head&quot; /&gt;&lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> | Retreive the Sitename<br /> | &lt;pre&gt;$mainframe-&gt;getCfg('sitename');&lt;/pre&gt;<br /> | &lt;pre&gt;$app-&gt;get('sitename');&lt;/pre&gt;<br /> |-<br /> | Retrieve Error Codes<br /> |&lt;pre&gt;$this-&gt;error-&gt;code&lt;/pre&gt;<br /> |&lt;pre&gt;$this-&gt;error-&gt;getCode();&lt;/pre&gt;<br /> |-<br /> | Retrieve Error Messages<br /> |&lt;pre&gt;$this-&gt;error-&gt;message&lt;/pre&gt;<br /> |&lt;pre&gt;$this-&gt;error-&gt;getMessage();&lt;/pre&gt;<br /> |-<br /> | Retrieve System Messages<br /> |&lt;pre&gt;$this-&gt;getBuffer('message')&lt;/pre&gt;<br /> |&lt;pre&gt;&lt;jdoc:include type=&quot;message&quot; /&gt;&lt;/pre&gt;<br /> |-<br /> | Active Language<br /> |&lt;pre&gt;$this-&gt;language;&lt;/pre&gt;<br /> |&lt;pre&gt;$doc-&gt;language;&lt;/pre&gt;<br /> |-<br /> | View<br /> |&lt;pre&gt;JRequest::getVar( 'view' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getCmd('view');&lt;/pre&gt;<br /> |-<br /> | Task<br /> |&lt;pre&gt;JRequest::getVar( 'task' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getCmd('task');&lt;/pre&gt;<br /> |-<br /> | Layout<br /> |&lt;pre&gt;JRequest::getVar( 'layout' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getString('layout', 'default');&lt;/pre&gt;<br /> |-<br /> | ID<br /> |&lt;pre&gt;JRequest::getVar( 'id' )&lt;/pre&gt;<br /> |With alias:&lt;pre&gt;$app-&gt;input-&gt;getString('id');&lt;/pre&gt;<br /> Only ID:&lt;pre&gt;$app-&gt;input-&gt;getInt('id');&lt;/pre&gt;<br /> |-<br /> | Homepage detection<br /> |&lt;pre&gt;&lt;?php if(JRequest::getVar( 'view' ) == 'frontpage') ?&gt;&lt;/pre&gt;<br /> |&lt;pre&gt;&lt;?php $menu = $app-&gt;getMenu();<br /> if($menu-&gt;getActive() == $menu-&gt;getDefault()) ?&gt;&lt;/pre&gt;<br /> |-<br /> | Main Content <br /> | &lt;pre&gt;&lt;jdoc:include type=&quot;component&quot; /&gt;&lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> | Modules &amp; Positions<br /> |&lt;pre&gt;&lt;jdoc:include type=&quot;modules&quot; name=&quot;right&quot; style=&quot;xhtml&quot; /&gt;&lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> | Retrieve Base URL<br /> |&lt;pre&gt;$url = clone(JURI::getInstance());<br /> echo $this-&gt;baseurl; <br /> JURI::root()*; <br /> &lt;/pre&gt;<br /> |&lt;pre&gt;<br /> JURI::base();<br /> $this-&gt;baseurl;<br /> &lt;/pre&gt;<br /> |-<br /> | Access to Document Page Classes<br /> |&lt;pre&gt;$doc = JFactory::getDocument();<br /> &lt;/pre&gt;<br /> |'''No change''' <br /> However, use of &quot;$this-&gt;&quot; is equivalent.<br /> |-<br /> |-<br /> | Access to Template Parameters<br /> |&lt;pre&gt;echo $this-&gt;params-&gt;get('colorVariation');<br /> &lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> |}<br /> <br /> &lt;noinclude&gt;<br /> [[Category:Template Development]]<br /> [[Category:Migration]]<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Template_Code_Comparison_of_J1.5_and_J3.x&diff=130524 2014-10-31T15:19:13Z

<p>Bakual: Text about template params in 3.x was wrong. $this-&gt;params still contains the template params</p> <hr /> <div>The table below is a quick reference of code differences between a Joomla 1.5 and Joomla 3.x template's &lt;code&gt;index.php&lt;/code&gt; file.<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! '''Description'''<br /> ! '''In a 1.5 Template(index.php)''' you might see<br /> ! '''Recommended J3.x Template(index.php) code'''<br /> |-<br /> | First Line<br /> | &lt;code&gt;&lt;?php defined( '_JEXEC' ) or die( 'Restricted access' );?&gt;&lt;/code&gt; <br /> | '''No change'''<br /> |-<br /> | DOCTYPE<br /> | &lt;pre&gt;&lt;?php echo '&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?'.'&gt;'; ?&gt;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br /> &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; dir=&quot;&lt;?php echo $this-&gt;direction; ?&gt;&quot; &gt;&lt;/pre&gt;<br /> |&lt;pre&gt;&lt;!DOCTYPE html&gt;<br /> &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; lang=&quot;&lt;?php echo $this-&gt;language; ?&gt;&quot; dir=&quot;&lt;?php echo $this-&gt;direction; ?&gt;&quot;&gt;&lt;/pre&gt;<br /> |-<br /> | Access to Joomla Framework<br /> | &lt;pre&gt;$app = JFactory::getApplication(); OR <br /> require_once (‘includes/../framework.php' );<br /> $mainframe =&amp; JFactory::getApplication('site');&lt;/pre&gt;<br /> | '''No change''' but needs to look like this: <br /> &lt;pre&gt;$app = JFactory::getApplication();&lt;/pre&gt;<br /> |-<br /> | Retreive HTML headers from Joomla<br /> | &lt;pre&gt;&lt;jdoc:include type=&quot;head&quot; /&gt;&lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> | Retreive the Sitename<br /> | &lt;pre&gt;$mainframe-&gt; getCfg('sitename');&lt;/pre&gt;<br /> | &lt;pre&gt;$app-&gt;getCfg('sitename');&lt;/pre&gt;<br /> |-<br /> | Retrieve Error Codes<br /> |&lt;pre&gt;$this-&gt;error-&gt;code&lt;/pre&gt;<br /> |&lt;pre&gt;$this-&gt;error-&gt;getCode();&lt;/pre&gt;<br /> |-<br /> | Retrieve Error Messages<br /> |&lt;pre&gt;$this-&gt;error-&gt;message&lt;/pre&gt;<br /> |&lt;pre&gt;$this-&gt;error-&gt;getMessage();&lt;/pre&gt;<br /> |-<br /> | Retrieve System Messages<br /> |&lt;pre&gt;$this-&gt;getBuffer('message')&lt;/pre&gt;<br /> |&lt;pre&gt;&lt;jdoc:include type=&quot;message&quot; /&gt;&lt;/pre&gt;<br /> |-<br /> | Active Language<br /> |&lt;pre&gt;$this-&gt;language;&lt;/pre&gt;<br /> |&lt;pre&gt;$doc-&gt;language;&lt;/pre&gt;<br /> |-<br /> | View<br /> |&lt;pre&gt;JRequest::getVar( 'view' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getCmd('view', '');&lt;/pre&gt;<br /> |-<br /> | Task<br /> |&lt;pre&gt;JRequest::getVar( 'task' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getCmd('task', '');&lt;/pre&gt;<br /> |-<br /> | Layout<br /> |&lt;pre&gt;JRequest::getVar( 'layout' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getCmd('layout, '');&lt;/pre&gt;<br /> |-<br /> | ID<br /> |&lt;pre&gt;JRequest::getVar( 'id' )&lt;/pre&gt;<br /> |&lt;pre&gt;$app-&gt;input-&gt;getCmd('layout, '');&lt;/pre&gt;<br /> |-<br /> | Homepage detection<br /> |&lt;pre&gt;&lt;?php if(JRequest::getVar( 'view' ) == 'frontpage') ?&gt;&lt;/pre&gt;<br /> |&lt;pre&gt;&lt;?php $menu = $app-&gt;getMenu();<br /> if($menu-&gt;getActive() == $menu-&gt; getDefault()) ?&gt;&lt;/pre&gt;<br /> |-<br /> | Main Content <br /> | &lt;pre&gt;&lt;jdoc:include type=&quot;component&quot; /&gt;&lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> | Modules &amp; Positions<br /> |&lt;pre&gt;&lt;jdoc:include type=&quot;modules&quot; name=&quot;right&quot; style=&quot;xhtml&quot; /&gt;&lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> | Retrieve Base URL<br /> |&lt;pre&gt;$url = clone(JURI::getInstance());<br /> echo $this-&gt;baseurl; <br /> JURI::root()*; <br /> &lt;/pre&gt;<br /> |&lt;pre&gt;<br /> JURI::base();<br /> $this-&gt;baseurl;<br /> &lt;/pre&gt;<br /> |-<br /> | Access to Document Page Classes<br /> |&lt;pre&gt;$doc = Jfactory::getDocument();<br /> &lt;/pre&gt;<br /> |'''No change''' <br /> However, use of &quot;$this-&gt;&quot; is equivalent.<br /> |-<br /> |-<br /> | Access to Template Parameters<br /> |&lt;pre&gt;echo $this-&gt;params-&gt;get('colorVariation');<br /> &lt;/pre&gt;<br /> | '''No change'''<br /> |-<br /> |}<br /> <br /> &lt;noinclude&gt;<br /> [[Category:Template Development]]<br /> [[Category:Migration]]<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Form_field&diff=128638 2014-10-20T09:22:40Z

<p>Bakual: /* Adding &quot;showon&quot; attribute to the common attributes */</p> <hr /> <div>&lt;onlyinclude&gt;<br /> == Introduction ==<br /> Form fields are fields in a HTML &lt;code&gt;&lt;form&gt;&lt;/code&gt;. Joomla! 2.5 {{JVer|2.5}} and newer supply the JForm class to conveniently and flexibly create forms with a large amount of form fields. Each form field type is a subclass of JFormField.<br /> <br /> In addition to being a flexible page creation tool, JFormFields are used by Joomla! to allow [[Administrator (User)|administrators]] to configure Joomla! or its extensions without changing the underlying code. In Joomla! 1.5, this was handled by the now deprecated [[API15:JParameter|JParameter]] and [[API15:JElement|JElement]] classes.<br /> <br /> To define form fields in the configuration of an extension, you must include them in a named fieldset, such as &lt;code&gt;&lt;fieldset name=&quot;basic&quot;&gt;&lt;/code&gt;, that is within the &lt;code&gt;&lt;fields name=&quot;params&quot;&gt;&lt;/code&gt; section of the &lt;code&gt;&lt;config&gt;&lt;/code&gt; element in your [[Manifest files|XML manifest file]].<br /> &lt;/onlyinclude&gt;<br /> <br /> == Form validation ==<br /> {{:Form validation}}<br /> == Standard form field types ==<br /> {{:Standard form field types}}<br /> == Custom form field types ==<br /> An [[extension]] can define its own form field types, which can then be used in its own forms or forms created by another extension. See [[Creating a custom form field type]] for instructions.<br /> === Modal form field types ===<br /> If you have a field with a lot of values that don't fit a selection box, you can always make a modal form field that will allow the user to pick an item from a modal page with a table, filtering options, etc. (jut like any administrator table, e.g. &quot;Articles&quot;)<br /> See [[Creating a modal form field]]<br /> <br /> == Common attributes ==<br /> === Labelclass ===<br /> Adding the attribute &lt;code&gt;labelclass&lt;/code&gt; adds a CSS class for form field's label. Source: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&amp;tracker_item_id=28450<br /> <br /> === Showon ===<br /> Adding the attribute &lt;code&gt;showon&lt;/code&gt; allows to hide the field based on the value(s) of another field.<br /> <br /> Syntax to show the field &quot;bar&quot; only when &quot;foo&quot; is set to &quot;1&quot;:<br /> &lt;source lang=&quot;php&quot;&gt;&lt;field<br /> name=&quot;foo&quot;<br /> type=&quot;list&quot;<br /> &gt;<br /> &lt;option value=&quot;1&quot;&gt;JYES&lt;/option&gt;<br /> &lt;option value=&quot;0&quot;&gt;JNO&lt;/option&gt;<br /> &lt;/field&gt;<br /> &lt;field<br /> name=&quot;bar&quot;<br /> type=&quot;text&quot;<br /> showon=&quot;foo:1&quot;<br /> /&gt;&lt;/source&gt;<br /> To match multiple values one can provide a comaseparated list of values. Like &lt;code&gt;shown=&quot;foo:1,2&quot;&lt;/code&gt;<br /> <br /> This was introduced with PullRequest: https://github.com/joomla/joomla-cms/pull/3379, available starting with Joomla 3.2.4.<br /> &lt;noinclude&gt;<br /> [[Category:Landing Pages]]<br /> [[Category:Form fields| ]]<br /> [[Category:Development]]<br /> &lt;/noinclude&gt;</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=J3.x:Install_From_Web_(For_Developers)&diff=106852 2014-01-15T13:28:03Z

<p>Bakual: Changing paths for the repos</p> <hr /> <div>{{version|3.2}}<br /> Joomla! 3.2 introduced the new Install from web feature that allows direct installations of extensions that are listed on JED. Making your extensions listed on JED available to Install from web is a two step process:<br /> # '''Fill out two new fields on the JED'''<br /> # '''Set up your site accordingly'''<br /> <br /> ==Fill out two new fields on JED==<br /> [[File:Install_from_Web_JED_Listing.png]]<br /> <br /> If you edit your extension listing on JED you will see two new fields. <br /> <br /> The first is '''Download Type''', where you can select the download type for your extension from the four provided options:<br /> # None<br /> # Free Direct Download Link:<br /> # Free but Registration Required at Link:<br /> # Commercial Purchase Required at Link:<br /> <br /> The second field is '''Download/registration/purchase URL''' and can contain one of the following URL:<br /> # A zip URL E.g. http://www.example.com/updates/com_extension_v9.9.zip<br /> # A update XML URL E.g. http://www.example.com/updates/extension_update.xml<br /> <br /> '''Please note''': the caching on the server for the &quot;Install from Web&quot; feature is set for 2-6 hours and so you probably won't see your changes right away in the Joomla backend.<br /> <br /> If your extension is a free direct download link then all your work is done and you can ignore the second step :)<br /> <br /> Here's some more detail on the download type.<br /> <br /> === None ===<br /> This the most common case today, and it basically means that you can't or don't want to provide a direct install URL for your extension. Only JED mandatory fields are filled, and &quot;Install from Web&quot; fields remain empty. <br /> <br /> When a user goes into his/her backend and click on the &quot;Install from Web&quot; tab, your extension can be found, the &quot;Download&quot; button is shown but there's no &quot;Install&quot; button. <br /> <br /> === Free Direct Download Link ===<br /> This is the option to choose if your extension is freely available, without registration or purchase. On the &quot;Download/registration/purchase URL&quot; you should put the URL of the update XML or directly the URL of the zip file.<br /> <br /> When a user goes into his/her backend and click on the &quot;Install from Web&quot; tab, your extension can be found and the &quot;Install&quot; button appears, so the user can just click to install your extension.<br /> <br /> === Free but Registration Required at Link ===<br /> This is the option to choose if your extension requires registration to be downloaded. On the &quot;Download/registration/purchase URL&quot; you should put the URL of your site '''Registration Page'''.<br /> <br /> When a user goes into his/her backend and click on the &quot;Install from Web&quot; tab, your extension can be found and the &quot;Install&quot; button appears; when the user click on the install button, he/she will be redirected to the registration page on your site.<br /> <br /> When you setup your site correctly (see Step 2 below) after successful registration the user will be redirected back to his/her site to complete the web install.<br /> <br /> === Commercial Purchase Required at Link ===<br /> This is the option to choose if your extension requires a purchase to be downloaded. On the &quot;Download/registration/purchase URL&quot; you should put the URL of your extension '''Purchase Page'''.<br /> <br /> When a user goes into his/her backend and click on the &quot;Install from Web&quot; tab, your extension can be found and the &quot;Install&quot; button appears; when the user click on the install button, he/she will be redirected to the purchase page page on your site.<br /> <br /> When you setup your site correctly (see Step 2 below) after successful puchase the user will be redirected back to his/her site to complete the web install.<br /> <br /> [What about subscription? Is that more similar to &quot;registration-based&quot; or to &quot;commercial-based&quot;?]<br /> <br /> == Setting up your site ==<br /> <br /> As stated before, if your extension is freely available without the need for registration or purchase, you don't need to do anything else so skip this step.<br /> <br /> === Setting your site and extensions up for -Free but Registration Required at Link- Extension ===<br /> <br /> If you require a consumer to register then you have to set up your site to deal with the user registration.<br /> <br /> If not, the user fills the registration, and the last step of the web installation is NOT completed.<br /> <br /> === How web installation works ===<br /> <br /> When user clicks on the 'Install' button, Joomla submits these parameters:<br /> <br /> # installat E.g. http://client.domain.com/administrator/index.php?option=com_installer&amp;view=install<br /> # installapp E.g. 99999<br /> <br /> '''installat''' is the return URL, and '''installapp''' is JED's extension ID.<br /> <br /> To fill the web installation step, you backend has to receive these parameters, process the registration, and return to the '''installat''' URL. <br /> <br /> While the registration is filled and processed, Joomla is expecting to receive the zip URL or an update XML URL. When it's received, Joomla finally completes the installation.<br /> <br /> === Web installation with jefreg-plugin ===<br /> <br /> The '''jefreg-plugin''' is the reference implementation. A good starting point that was developed specifically for this purpose found [https://github.com/joomla-extensions/install-from-web-plugins here].<br /> <br /> The plugin has two parameters:<br /> <br /> # Files to download<br /> # Entry URL<br /> <br /> In the ''Files to Download'' parameter, the first parameter you have to set up is to point the plugin to your extensions update XML files, zip files or script (one per line).<br /> <br /> 99999=&gt;http://www.example.com/updates/com_extension_v9.9.zip<br /> <br /> 30458=&gt;http://www.example.com/updates/extension_update.xml<br /> <br /> 77777=&gt;http://www.example.com/updates/download.php<br /> <br /> If the line starts with an asterisk [*], it is ignored and left to be handled by plugins that support downloads after payment has been received. Examples of such plugins can be found as branches in the repository mentioned above.<br /> <br /> About Entry URL: this plugin is specifically designed for the Joomla User Component (Defaul value index.php?option=com_users&amp;view=login) however it will also integrate nicely with any registration page. E.g. in Community Builder case simply by changing the entry point URL in the plugins parameters - generally it is recommended (but by no means compulsory) to point this to your login page. Note an empty value of this parameter will default to pointing to the Joomla User Component Login page.<br /> <br /> ==== How to build jefreg-plugin ====<br /> <br /> # Download the files from github<br /> # Copy language files into the system plugin directory<br /> # Zip all files, and install it in the Extension Manager<br /> <br /> === Setting your site and extensions up for a Commercial Extension ===<br /> <br /> This will need more work than the previous step. It is advised that you download the same plugin - however you will have to integrate into the plugin an extra check to see if the user has purchased your extension. As different extensions implement this in many different ways it is left to extension developers to implement this functionality.<br /> <br /> The plugin can be used to get '''installat''' and '''installapp''' parameters, but it must NOT return the zip URL or update XML URL onUserLogin. When the purchase is completed, the operation can return to fill the web installation.<br /> <br /> === Source code for the feature ===<br /> You can contribute bug fixes and new features to the following repositories:<br /> <br /> * https://github.com/joomla-extensions/install-from-web-client (client plugin)<br /> * https://github.com/joomla-extensions/install-from-web-server (server part)<br /> * https://github.com/joomla-extensions/install-from-web-plugins (example plugin to be used by developers)<br /> * https://github.com/joomla/joomla-cms (CMS repo)<br /> <br /> [[Category:Extension development]]<br /> [[Category:Extensions]]<br /> [[Category:Extension Installation]]</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Display_error_messages_and_notices&diff=85379 2013-04-26T19:30:30Z

<p>Bakual: types where wrong for J!3.1</p> <hr /> <div>{{RightTOC}}<br /> Errors, warnings and notices can be displayed from any component, module, plugin or template using the methods outlined below.<br /> &lt;source lang=&quot;php&quot;&gt;<br /> // Get a handle to the Joomla! application object<br /> $application = JFactory::getApplication();<br /> <br /> // Add a message to the message queue<br /> $application-&gt;enqueueMessage(JText::_('SOME_ERROR_OCCURRED'), 'error');<br /> <br /> /** Alternatively you may use chaining */<br /> JFactory::getApplication()-&gt;enqueueMessage(JText::_('SOME_ERROR_OCCURRED'), 'error');<br /> &lt;/source&gt;<br /> <br /> The second argument to the [[JApplication/enqueueMessage|enqueueMessage]] function is the type of the message. The default is 'message', but 'error' results in a different style for the message. The message will be displayed in place of a special &lt;tt&gt;jdoc:include&lt;/tt&gt; statement in your template. Place the following in your template at the location where you want messages to appear.<br /> &lt;source lang=&quot;php&quot;&gt;<br /> &lt;jdoc:include type=&quot;message&quot; /&gt;<br /> &lt;/source&gt;<br /> <br /> == Message ==<br /> &lt;div style=&quot;background-color: #c3d2e5; color: #0055bb; border-top: 3px solid #84a7db; border-bottom: 3px solid #84a7db; padding-left: 1em; font-weight: bold;&quot;&gt;<br /> Message<br /> &lt;/div&gt;<br /> &lt;source lang=&quot;php&quot;&gt;<br /> JFactory::getApplication()-&gt;enqueueMessage('Message');<br /> &lt;/source&gt;<br /> <br /> == Notice ==<br /> <br /> &lt;div style=&quot;background-color: #efe7b8; color: #c00; border-top: 3px solid #f0dc7e; border-bottom: 3px solid #f0dc7e; padding-left: 1em; font-weight: bold;&quot;&gt;<br /> Notice<br /> &lt;/div&gt;<br /> &lt;source lang=&quot;php&quot;&gt;<br /> JError::raiseNotice( 100, 'Notice' );<br /> &lt;/source&gt;<br /> <br /> == Warning ==<br /> <br /> &lt;div style=&quot;background-color: #e6c0c0; color: #c00; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; padding-left: 1em; font-weight: bold;&quot;&gt;<br /> Warning<br /> &lt;/div&gt;<br /> &lt;source lang=&quot;php&quot;&gt;<br /> JError::raiseWarning( 100, 'Warning' );<br /> &lt;/source&gt;<br /> <br /> == Error ==<br /> &lt;source lang=&quot;php&quot;&gt;<br /> JError::raiseError( 4711, 'A severe error occurred' );<br /> &lt;/source&gt;<br /> <br /> == Joomla! 3.x is bootstraped ==<br /> Since Joomla! {{JVer|3.0}} will use bootstraped templates, the messages will use the standard boostrap CSS styles for Alerts.<br /> <br /> See: http://twitter.github.com/bootstrap/components.html#alerts<br /> <br /> The general syntax remains:<br /> <br /> &lt;source lang=&quot;php&quot;&gt;<br /> JFactory::getApplication()-&gt;enqueueMessage('Your Message', 'type');<br /> &lt;/source&gt;<br /> <br /> Where '''type''' can be one of<br /> <br /> * 'warning' - yellow<br /> * 'notice' - blue<br /> * 'error' - red<br /> * 'message' (or empty) - green<br /> <br /> == See also ==<br /> * [[JError]]<br /> * [[JApplication]]<br /> * [http://api.joomla.org/1.5/Joomla-Framework/Application/JApplication.html JApplication on api.joomla.org]<br /> <br /> &lt;noinclude&gt;[[Category:Development]]&lt;/noinclude&gt;<br /> [[Category:Tutorials]][[Category:Component Development]]</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Archived:Developing_a_MVC_Component/Adding_an_update_server&diff=37235 2011-02-13T15:28:27Z

<p>Bakual: /* Adding a updateserver definition */</p> <hr /> <div>This tutorial is for {{JVer|1.6}}<br /> <br /> == Articles in this series ==<br /> {{Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!1.6 - Contents}}<br /> <br /> == Introduction ==<br /> This tutorial is part of the [[Developing a Model-View-Controller (MVC) Component for Joomla!1.6]] tutorial. You are encouraged to read the previous parts of the tutorial before reading this.<br /> <br /> == Adding a updateserver definition ==<br /> To add a updateserver functionality adjust the helloworld.xml to look like this.<br /> <br /> &lt;span id=&quot;helloworld.xml&quot;&gt;<br /> ''helloworld.xml''<br /> &lt;source lang=&quot;xml&quot;&gt;<br /> &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br /> &lt;extension type=&quot;component&quot; version=&quot;1.6.0&quot; method=&quot;upgrade&quot;&gt;<br /> <br /> &lt;name&gt;COM_HELLOWORLD&lt;/name&gt;<br /> &lt;!-- The following elements are optional and free of formatting conttraints --&gt;<br /> &lt;creationDate&gt;November 2009&lt;/creationDate&gt;<br /> &lt;author&gt;John Doe&lt;/author&gt;<br /> &lt;authorEmail&gt;john.doe@example.org&lt;/authorEmail&gt;<br /> &lt;authorUrl&gt;http://www.example.org&lt;/authorUrl&gt;<br /> &lt;copyright&gt;Copyright Info&lt;/copyright&gt;<br /> &lt;license&gt;License Info&lt;/license&gt;<br /> &lt;!-- The version string is recorded in the components table --&gt;<br /> &lt;version&gt;0.0.15&lt;/version&gt;<br /> &lt;!-- The description is optional and defaults to the name --&gt;<br /> &lt;description&gt;COM_HELLOWORLD_DESCRIPTION&lt;/description&gt;<br /> <br /> &lt;!-- Runs on install/uninstall/update; New in 1.6 --&gt;<br /> &lt;scriptfile&gt;script.php&lt;/scriptfile&gt;<br /> <br /> &lt;install&gt; &lt;!-- Runs on install --&gt;<br /> &lt;sql&gt;<br /> &lt;file driver=&quot;mysql&quot; charset=&quot;utf8&quot;&gt;sql/install.mysql.utf8.sql&lt;/file&gt;<br /> &lt;/sql&gt;<br /> &lt;/install&gt;<br /> &lt;uninstall&gt; &lt;!-- Runs on uninstall --&gt;<br /> &lt;sql&gt;<br /> &lt;file driver=&quot;mysql&quot; charset=&quot;utf8&quot;&gt;sql/uninstall.mysql.utf8.sql&lt;/file&gt;<br /> &lt;/sql&gt;<br /> &lt;/uninstall&gt;<br /> &lt;update&gt; &lt;!-- Runs on update; New in 1.6 --&gt;<br /> &lt;schemas&gt;<br /> &lt;schemapath type=&quot;mysql&quot;&gt;sql/updates/mysql&lt;/schemapath&gt;<br /> &lt;/schemas&gt;<br /> &lt;/update&gt;<br /> <br /> &lt;!-- Site Main File Copy Section --&gt;<br /> &lt;!-- Note the folder attribute: This attribute describes the folder<br /> to copy FROM in the package to install therefore files copied<br /> in this section are copied from /site/ in the package --&gt;<br /> &lt;files folder=&quot;site&quot;&gt;<br /> &lt;filename&gt;index.html&lt;/filename&gt;<br /> &lt;filename&gt;helloworld.php&lt;/filename&gt;<br /> &lt;filename&gt;controller.php&lt;/filename&gt;<br /> &lt;folder&gt;views&lt;/folder&gt;<br /> &lt;folder&gt;models&lt;/folder&gt;<br /> &lt;folder&gt;language&lt;/folder&gt;<br /> &lt;/files&gt;<br /> <br /> &lt;media destination=&quot;com_helloworld&quot; folder=&quot;media&quot;&gt;<br /> &lt;filename&gt;index.html&lt;/filename&gt;<br /> &lt;folder&gt;images&lt;/folder&gt;<br /> &lt;/media&gt;<br /> <br /> &lt;administration&gt;<br /> &lt;!-- Administration Menu Section --&gt;<br /> &lt;menu img=&quot;../media/com_helloworld/images/tux-16x16.png&quot;&gt;COM_HELLOWORLD_MENU&lt;/menu&gt;<br /> &lt;!-- Administration Main File Copy Section --&gt;<br /> &lt;!-- Note the folder attribute: This attribute describes the folder<br /> to copy FROM in the package to install therefore files copied<br /> in this section are copied from /admin/ in the package --&gt;<br /> &lt;files folder=&quot;admin&quot;&gt;<br /> &lt;!-- Admin Main File Copy Section --&gt;<br /> &lt;filename&gt;index.html&lt;/filename&gt;<br /> &lt;filename&gt;config.xml&lt;/filename&gt;<br /> &lt;filename&gt;access.xml&lt;/filename&gt;<br /> &lt;filename&gt;helloworld.php&lt;/filename&gt;<br /> &lt;filename&gt;controller.php&lt;/filename&gt;<br /> &lt;!-- SQL files section --&gt;<br /> &lt;folder&gt;sql&lt;/folder&gt;<br /> &lt;!-- tables files section --&gt;<br /> &lt;folder&gt;tables&lt;/folder&gt;<br /> &lt;!-- models files section --&gt;<br /> &lt;folder&gt;models&lt;/folder&gt;<br /> &lt;!-- views files section --&gt;<br /> &lt;folder&gt;views&lt;/folder&gt;<br /> &lt;!-- controllers files section --&gt;<br /> &lt;folder&gt;controllers&lt;/folder&gt;<br /> &lt;!-- helpers files section --&gt;<br /> &lt;folder&gt;helpers&lt;/folder&gt;<br /> &lt;/files&gt;<br /> <br /> &lt;languages folder=&quot;admin&quot;&gt;<br /> &lt;language tag=&quot;en-GB&quot;&gt;language/en-GB/en-GB.com_helloworld.ini&lt;/language&gt;<br /> &lt;language tag=&quot;en-GB&quot;&gt;language/en-GB/en-GB.com_helloworld.sys.ini&lt;/language&gt;<br /> &lt;/languages&gt;<br /> &lt;/administration&gt;<br /> <br /> &lt;!-- UPDATESERVER DEFINITION --&gt;<br /> &lt;updateservers&gt;<br /> &lt;!-- Note: No spaces or linebreaks allowed between the server tags --&gt;<br /> &lt;server type=&quot;extension&quot; priority=&quot;1&quot; name=&quot;HelloWorld Update Site&quot;&gt;http://yourdomain.com/update/helloworld-update.xml&lt;/server&gt;<br /> &lt;/updateservers&gt;<br /> <br /> &lt;/extension&gt;<br /> &lt;/source&gt;<br /> &lt;/span&gt;<br /> <br /> You also need to put a XML-file on your server which contains all update-informations.<br /> <br /> &lt;span id=&quot;helloworld-update.xml&quot;&gt;<br /> ''helloworld-update.xml''<br /> &lt;source lang=&quot;xml&quot;&gt;<br /> &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br /> &lt;updates&gt;<br /> &lt;update&gt;<br /> &lt;name&gt;HelloWorld&lt;/name&gt;<br /> &lt;description&gt;HelloWorld Component&lt;/description&gt;<br /> &lt;element&gt;com_helloworld&lt;/element&gt;<br /> &lt;type&gt;component&lt;/type&gt;<br /> &lt;version&gt;1.5.0&lt;/version&gt;<br /> <br /> &lt;infourl title=&quot;HalloWorld URL&quot;&gt;http://yourdomain.com&lt;/infourl&gt;<br /> &lt;downloads&gt;<br /> &lt;downloadurl type=&quot;full&quot; format=&quot;tgz&quot;&gt;http://yourdomain.com/files/com_helloworld-1.5.0-final.zip&lt;/downloadurl&gt;<br /> &lt;/downloads&gt;<br /> &lt;tags&gt;<br /> &lt;tag&gt;some-tag&lt;/tag&gt;<br /> &lt;/tags&gt;<br /> <br /> &lt;maintainer&gt;HelloWorld Inc.&lt;/maintainer&gt;<br /> &lt;maintainerurl&gt;http://yourdomain.com&lt;/maintainerurl&gt;<br /> &lt;section&gt;some-section&lt;/section&gt;<br /> &lt;targetplatform name=&quot;joomla&quot; version=&quot;1.6&quot; /&gt;<br /> &lt;/update&gt;<br /> <br /> &lt;update&gt;<br /> &lt;name&gt;HelloWorld&lt;/name&gt;<br /> &lt;description&gt;HelloWorld Component&lt;/description&gt;<br /> &lt;element&gt;com_helloworld&lt;/element&gt;<br /> &lt;type&gt;component&lt;/type&gt;<br /> &lt;version&gt;1.5.1&lt;/version&gt;<br /> <br /> &lt;infourl title=&quot;HalloWorld URL&quot;&gt;http://yourdomain.com&lt;/infourl&gt;<br /> &lt;downloads&gt;<br /> &lt;downloadurl type=&quot;full&quot; format=&quot;tgz&quot;&gt;http://yourdomain.com/files/com_helloworld-1.5.1-final.zip&lt;/downloadurl&gt;<br /> &lt;/downloads&gt;<br /> &lt;tags&gt;<br /> &lt;tag&gt;some-tag&lt;/tag&gt;<br /> &lt;/tags&gt;<br /> <br /> &lt;maintainer&gt;HelloWorld Inc.&lt;/maintainer&gt;<br /> &lt;maintainerurl&gt;http://yourdomain.com&lt;/maintainerurl&gt;<br /> &lt;section&gt;some-section&lt;/section&gt;<br /> &lt;targetplatform name=&quot;joomla&quot; version=&quot;1.6&quot; /&gt;<br /> &lt;/update&gt;<br /> <br /> &lt;/updates&gt;<br /> <br /> &lt;/source&gt;<br /> &lt;/span&gt;<br /> <br /> You need to add a new update-node every time you publish a new release.</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Archived:Developing_a_MVC_Component/Adding_an_update_server&diff=37234 2011-02-13T15:27:44Z

<p>Bakual: /* Adding a updateserver definition */</p> <hr /> <div>This tutorial is for {{JVer|1.6}}<br /> <br /> == Articles in this series ==<br /> {{Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!1.6 - Contents}}<br /> <br /> == Introduction ==<br /> This tutorial is part of the [[Developing a Model-View-Controller (MVC) Component for Joomla!1.6]] tutorial. You are encouraged to read the previous parts of the tutorial before reading this.<br /> <br /> == Adding a updateserver definition ==<br /> To add a updateserver functionality adjust the helloworld.xml to look like this.<br /> <br /> &lt;span id=&quot;helloworld.xml&quot;&gt;<br /> ''helloworld.xml''<br /> &lt;source lang=&quot;xml&quot;&gt;<br /> &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br /> &lt;extension type=&quot;component&quot; version=&quot;1.6.0&quot; method=&quot;upgrade&quot;&gt;<br /> <br /> &lt;name&gt;COM_HELLOWORLD&lt;/name&gt;<br /> &lt;!-- The following elements are optional and free of formatting conttraints --&gt;<br /> &lt;creationDate&gt;November 2009&lt;/creationDate&gt;<br /> &lt;author&gt;John Doe&lt;/author&gt;<br /> &lt;authorEmail&gt;john.doe@example.org&lt;/authorEmail&gt;<br /> &lt;authorUrl&gt;http://www.example.org&lt;/authorUrl&gt;<br /> &lt;copyright&gt;Copyright Info&lt;/copyright&gt;<br /> &lt;license&gt;License Info&lt;/license&gt;<br /> &lt;!-- The version string is recorded in the components table --&gt;<br /> &lt;version&gt;0.0.15&lt;/version&gt;<br /> &lt;!-- The description is optional and defaults to the name --&gt;<br /> &lt;description&gt;COM_HELLOWORLD_DESCRIPTION&lt;/description&gt;<br /> <br /> &lt;!-- Runs on install/uninstall/update; New in 1.6 --&gt;<br /> &lt;scriptfile&gt;script.php&lt;/scriptfile&gt;<br /> <br /> &lt;install&gt; &lt;!-- Runs on install --&gt;<br /> &lt;sql&gt;<br /> &lt;file driver=&quot;mysql&quot; charset=&quot;utf8&quot;&gt;sql/install.mysql.utf8.sql&lt;/file&gt;<br /> &lt;/sql&gt;<br /> &lt;/install&gt;<br /> &lt;uninstall&gt; &lt;!-- Runs on uninstall --&gt;<br /> &lt;sql&gt;<br /> &lt;file driver=&quot;mysql&quot; charset=&quot;utf8&quot;&gt;sql/uninstall.mysql.utf8.sql&lt;/file&gt;<br /> &lt;/sql&gt;<br /> &lt;/uninstall&gt;<br /> &lt;update&gt; &lt;!-- Runs on update; New in 1.6 --&gt;<br /> &lt;schemas&gt;<br /> &lt;schemapath type=&quot;mysql&quot;&gt;sql/updates/mysql&lt;/schemapath&gt;<br /> &lt;/schemas&gt;<br /> &lt;/update&gt;<br /> <br /> &lt;!-- Site Main File Copy Section --&gt;<br /> &lt;!-- Note the folder attribute: This attribute describes the folder<br /> to copy FROM in the package to install therefore files copied<br /> in this section are copied from /site/ in the package --&gt;<br /> &lt;files folder=&quot;site&quot;&gt;<br /> &lt;filename&gt;index.html&lt;/filename&gt;<br /> &lt;filename&gt;helloworld.php&lt;/filename&gt;<br /> &lt;filename&gt;controller.php&lt;/filename&gt;<br /> &lt;folder&gt;views&lt;/folder&gt;<br /> &lt;folder&gt;models&lt;/folder&gt;<br /> &lt;folder&gt;language&lt;/folder&gt;<br /> &lt;/files&gt;<br /> <br /> &lt;media destination=&quot;com_helloworld&quot; folder=&quot;media&quot;&gt;<br /> &lt;filename&gt;index.html&lt;/filename&gt;<br /> &lt;folder&gt;images&lt;/folder&gt;<br /> &lt;/media&gt;<br /> <br /> &lt;administration&gt;<br /> &lt;!-- Administration Menu Section --&gt;<br /> &lt;menu img=&quot;../media/com_helloworld/images/tux-16x16.png&quot;&gt;COM_HELLOWORLD_MENU&lt;/menu&gt;<br /> &lt;!-- Administration Main File Copy Section --&gt;<br /> &lt;!-- Note the folder attribute: This attribute describes the folder<br /> to copy FROM in the package to install therefore files copied<br /> in this section are copied from /admin/ in the package --&gt;<br /> &lt;files folder=&quot;admin&quot;&gt;<br /> &lt;!-- Admin Main File Copy Section --&gt;<br /> &lt;filename&gt;index.html&lt;/filename&gt;<br /> &lt;filename&gt;config.xml&lt;/filename&gt;<br /> &lt;filename&gt;access.xml&lt;/filename&gt;<br /> &lt;filename&gt;helloworld.php&lt;/filename&gt;<br /> &lt;filename&gt;controller.php&lt;/filename&gt;<br /> &lt;!-- SQL files section --&gt;<br /> &lt;folder&gt;sql&lt;/folder&gt;<br /> &lt;!-- tables files section --&gt;<br /> &lt;folder&gt;tables&lt;/folder&gt;<br /> &lt;!-- models files section --&gt;<br /> &lt;folder&gt;models&lt;/folder&gt;<br /> &lt;!-- views files section --&gt;<br /> &lt;folder&gt;views&lt;/folder&gt;<br /> &lt;!-- controllers files section --&gt;<br /> &lt;folder&gt;controllers&lt;/folder&gt;<br /> &lt;!-- helpers files section --&gt;<br /> &lt;folder&gt;helpers&lt;/folder&gt;<br /> &lt;/files&gt;<br /> <br /> &lt;languages folder=&quot;admin&quot;&gt;<br /> &lt;language tag=&quot;en-GB&quot;&gt;language/en-GB/en-GB.com_helloworld.ini&lt;/language&gt;<br /> &lt;language tag=&quot;en-GB&quot;&gt;language/en-GB/en-GB.com_helloworld.sys.ini&lt;/language&gt;<br /> &lt;/languages&gt;<br /> &lt;/administration&gt;<br /> <br /> &lt;!-- UPDATESERVER DEFINITION --&gt;<br /> &lt;updateservers&gt;<br /> &lt;!-- Note: No spaces or linebreaks allowed between &lt;server ...&gt; and &lt;/server&gt; --&gt;<br /> &lt;server type=&quot;extension&quot; priority=&quot;1&quot; name=&quot;HelloWorld Update Site&quot;&gt;http://yourdomain.com/update/helloworld-update.xml&lt;/server&gt;<br /> &lt;/updateservers&gt;<br /> <br /> &lt;/extension&gt;<br /> &lt;/source&gt;<br /> &lt;/span&gt;<br /> <br /> You also need to put a XML-file on your server which contains all update-informations.<br /> <br /> &lt;span id=&quot;helloworld-update.xml&quot;&gt;<br /> ''helloworld-update.xml''<br /> &lt;source lang=&quot;xml&quot;&gt;<br /> &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br /> &lt;updates&gt;<br /> &lt;update&gt;<br /> &lt;name&gt;HelloWorld&lt;/name&gt;<br /> &lt;description&gt;HelloWorld Component&lt;/description&gt;<br /> &lt;element&gt;com_helloworld&lt;/element&gt;<br /> &lt;type&gt;component&lt;/type&gt;<br /> &lt;version&gt;1.5.0&lt;/version&gt;<br /> <br /> &lt;infourl title=&quot;HalloWorld URL&quot;&gt;http://yourdomain.com&lt;/infourl&gt;<br /> &lt;downloads&gt;<br /> &lt;downloadurl type=&quot;full&quot; format=&quot;tgz&quot;&gt;http://yourdomain.com/files/com_helloworld-1.5.0-final.zip&lt;/downloadurl&gt;<br /> &lt;/downloads&gt;<br /> &lt;tags&gt;<br /> &lt;tag&gt;some-tag&lt;/tag&gt;<br /> &lt;/tags&gt;<br /> <br /> &lt;maintainer&gt;HelloWorld Inc.&lt;/maintainer&gt;<br /> &lt;maintainerurl&gt;http://yourdomain.com&lt;/maintainerurl&gt;<br /> &lt;section&gt;some-section&lt;/section&gt;<br /> &lt;targetplatform name=&quot;joomla&quot; version=&quot;1.6&quot; /&gt;<br /> &lt;/update&gt;<br /> <br /> &lt;update&gt;<br /> &lt;name&gt;HelloWorld&lt;/name&gt;<br /> &lt;description&gt;HelloWorld Component&lt;/description&gt;<br /> &lt;element&gt;com_helloworld&lt;/element&gt;<br /> &lt;type&gt;component&lt;/type&gt;<br /> &lt;version&gt;1.5.1&lt;/version&gt;<br /> <br /> &lt;infourl title=&quot;HalloWorld URL&quot;&gt;http://yourdomain.com&lt;/infourl&gt;<br /> &lt;downloads&gt;<br /> &lt;downloadurl type=&quot;full&quot; format=&quot;tgz&quot;&gt;http://yourdomain.com/files/com_helloworld-1.5.1-final.zip&lt;/downloadurl&gt;<br /> &lt;/downloads&gt;<br /> &lt;tags&gt;<br /> &lt;tag&gt;some-tag&lt;/tag&gt;<br /> &lt;/tags&gt;<br /> <br /> &lt;maintainer&gt;HelloWorld Inc.&lt;/maintainer&gt;<br /> &lt;maintainerurl&gt;http://yourdomain.com&lt;/maintainerurl&gt;<br /> &lt;section&gt;some-section&lt;/section&gt;<br /> &lt;targetplatform name=&quot;joomla&quot; version=&quot;1.6&quot; /&gt;<br /> &lt;/update&gt;<br /> <br /> &lt;/updates&gt;<br /> <br /> &lt;/source&gt;<br /> &lt;/span&gt;<br /> <br /> You need to add a new update-node every time you publish a new release.</div>

Bakual https://docs.sandbox.joomla.org/index.php?title=Archived_talk:Developing_a_MVC_Component/Developing_a_Basic_Component&diff=33262 2010-12-21T12:07:30Z

<p>Bakual: /* Component name in manifestfile has to be conform */ new section</p> <hr /> <div>== Component name in manifestfile has to be conform ==<br /> <br /> In Joomla 1.6 the component name specified in the manifest file has to follow the pattern 'com_componentname'. So here it should be <br /> <br /> &lt;name&gt;com_helloworld&lt;/name&gt;<br /> <br /> It will matter at least in the menu manager, where I discovered this problem.</div>

Bakual