Loading...
 

Icons

Creating a Theme for Tiki? See https://themes.tiki.org/Icons

PHP

Try to avoid direct inclusion of any image tags in PHP including icons. See the Templates below:

Templates

There is a Smarty function which helps to insert icons in the code:
lib/smarty_tiki/function.icon.php

It will display a Tiki icon, using theme icons if they exist.
Params will be used as attributes for a HTML tag (e.g. class, etc.), except for special params starting with '_' :

  • - _id: short name (i.e. 'page_edit') or relative file path (i.e. 'img/icons/page_edit.png'). required
  • - _type: type of URL to use (e.g. 'absolute_uri', 'absolute_path'). Defaults to a relative URL.
  • - _tag: type of HTML tag to use (e.g. 'img', 'input_image'). Defaults to 'img' tag.
  • - _notag: if set to 'y', will only return the URL (which also handles theme icons).
  • - _menu_text: if set to 'y', will use the 'title' argument as text after the icon and place the whole content between div tags with a 'icon_menu' class (not compatible with '_notag' param set to 'y').
  • - _menu_icon: if set to 'n', will not show icon image when _menu_text is 'y'.
  • - _confirm: text to use in a popup requesting the user to confirm its action (yet only available with javascript)
  • - _defaultdir: directory to use when the _id param does not include the path
  • - _extension: Filename extension - default 'png'


When introducing new icon in .tpl file, developers should always use this icon Smarty syntax:

{icon _id=error style="vertical-align: middle"}


The example above means it will create icon from the img/icons/error.png file and add a style attribute to it.

Tiki 13

There are glyphicons (font vector format icons) being introduced now in trunk with Bootstrap instead of bitmap (image based) icons.
For example you can have "OK" icon rendered by this HTML code:

<span class="glyphicon glyphicon-ok"></span>

Tiki 14 - Iconsets (development proposal)

What is the goal?

The goal of having iconsets is to
- make it easy to change icons in Tiki
- keep icon usage in smarty tpl files simple
- move icon customization out of the smarty tpl files
- more focus in having a centralized, future proof way of handling icons in Tiki

 Ok, but I can already override default icons through css and less, so why change anything?

Yes, if you are good with css you can override icons one-by-one.

As Gary pointed out on dev mail list, you can also modify using the bootstrap-variables.less file that contains:
@icon-font-path: "../vendor/twitter/bootstrap/fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
So this can be set as a default for the Tiki package and also on the theme level.

So why bother changing? One goal is to unify icon usage in smarty tpl-s. If only a semantic, descriptive icon name (eg: {icon name="save"}) is used and icon attributes are shifted outside the tpls than the tpls dont need to be changed if new approaches arise (eg: few years ago you did not think icon fonts or svg-s become the new trend). It is future proof to enhance the existing icon smarty function and add the iconset definition files to manage new trends instead of modifying all the tpls.

Also as what one considers to be a nice icon is a matter of personal taste, it should be easy to change the icons sitewide. Currently it is pretty hard and time consuming.

So what is the plan?

- Tiki will remain to have a central function to manage icons, which is the existing icon smarty_tiki function (/lib/smarty_tiki/function.icon.php)

- The only accepted way to include an icon in a smarty tpl file is to use the icon smarty_tiki function in the tpl files like this: {icon name="nameoftheicon"} (This also means that {glyph} and {fa} functions shall be deprected and the affected tpls should be changed to use {icon} smarty function.)

 Title parameter?

Should the icon have a title option? eg: {icon name="save" title="{tr}Save{/tr}"}

 Buttons with icon and text?

How to manage buttons that have an icon and some text behind: Incorrect paramEdit Plugin:button or {icon} function? If button function, than it probably has to be changed to work with iconsets

 What to do with existing parameters of the icon function?

- _id: short name (i.e. 'page_edit') or relative file path (i.e. 'img/icons/page_edit.png'). required -> will be png_file_name parameter, see icon definition below

- _type: type of URL to use (e.g. 'absolute_uri', 'absolute_path'). Defaults to a relative URL. -> is this needed?
- _tag: type of HTML tag to use (e.g. 'img', 'input_image'). Defaults to 'img' tag. -> same as tag paremeter, see below at icon definition
- _notag: if set to 'y', will only return the URL (which also handles theme icons). -> is this needed?
- _menu_text: if set to 'y', will use the 'title' argument as text after the icon and place the whole content between div tags with a 'icon_menu' class (not compatible with '_notag' param set to 'y'). -> is this needed?
- _menu_icon: if set to 'n', will not show icon image when _menu_text is 'y'. -> is this needed?
- _confirm: text to use in a popup requesting the user to confirm its action (yet only available with javascript) -> is this needed?
- _defaultdir: directory to use when the _id param does not include the path -> will be the png_path parameter, see below at icon definition

- _extension: Filename extension - default 'png' -> is this needed?


- Icons will be referenced by a descriptive name in tpl-s (eg: "save", "delete", etc). Naming can be taken from anywhere, in order to make this quick the proposal is to take what is used by font-awesome, see here: http://fontawesome.io/cheatsheet (by removing "fa-" from the beginning)

- Icons will be part of an iconset. Iconsets are defined using a multidimensional array in a php file that provide path and settings for the icon files.

- Cascading iconset approach (similar to css): have a base (default) iconset, other iconsets need to define only what should be different than the default iconset

- Tiki ships with a default iconset (iconset_default.php), which is the fallback for all other iconsets. The definition of the default iconset is stored here: /themes/iconsets/. File name: iconset_default.php. This file should not be modified for local customisations.

- If you want to contribute an iconset to Tiki, put it to the themes/iconsets/ folder with a distinct name eg: iconset_mybelovediconset.php, iconset_famfam.php etc. In the Look&Feel administration you can choose from the iconsets shipped with Tiki.

- Local iconset customizations can be put to 2 places: /styles/ folder if you want it to be applied to all your themes or into the themes folder to use it only for the given theme

Iconset specification

DRAFT - Please help with the specification by correcting and adding any other options that might be needed

$iconset = array(
	'_settings' => array( //iconset settings
		'iconset_name' => tr('Default'), //mandatory, this will be displayed as Iconset option in the Look&Feel admin UI
		'icon_path_svg' => 'vendor/fortawesome/font-awesome/', //The default path for svg so that you dont need to specify for each icon. You can override this for each icon using the path_svg option
		'icon_path_font' =>   //The default path for font icons so that you dont need to specify for each icon. You can override this for each icon using the path_font option
		'icon_path_png' =>  //The default path for png images so that you dont need to specify for each icon. You can override this for each icon using the path_png option
		'icon_default_tag' => 'img', //The default html tag that contains the icon. possible values: svg, img, span. You can override this for each icon using the tag option
		'icon_default_type' => 'font', //The default file type of the icon. Possible values: svg, font, png, jpeg. You can override this for each icon using the type option. Type sequence: 1)svg 2)font 3)png, so icon function will first use what is in the path_svg, than path_font, than path_png
	),
	'save' => array( //This is the definition of an icon in the iconset. The key must be unique, it is the "name" parameter at the icon function, so eg: {icon name="save"} will find 'save' in the array and apply the specified configuration
		'alias_for' => 'edit', //enable to have alias, enables to take configuration from another icon. maybe specify separately for svg, font and png?
		'class' => 'fa fa-save', //apply this class, this is the class used for a glyphicon or a font-awesome icon  
		'alt' => tr('Save'),  //alternate text for an image, if the image cannot be displayed (http://www.w3schools.com/tags/att_img_alt.asp)
		'svg_path' => , //Specifies the URL for an svg definition. Optional, if not defined, the default defined at _settings is used.
		'font_path' => , //Specifies the URL for font icon. Optional, if not defined, the default defined at _settings is used.
		'png_path' => , //Specifies the URL of an image. Optional, if not defined, the default defined at _settings is used.
		'png_file_name' => 'disk', //for the legacy reference for famfamfam png files. The legacy base dir can remain in the icon smarty function.
		'tag' => , //maybe specify separately for svg, font and png?
	),
);

Samples

Custom iconset - fontawesome only

$iconset = array(
	'_settings' => array(
		'iconset_name' => tr('Font-awesome iconset'),
		'icon_default_type' => 'font',
	),
	'save' => array(
		'class' => 'fa fa-save',
	),
);

Custom iconset - famfamfam only

$iconset = array(
	'_settings' => array(
		'iconset_name' => tr('Famfamfam iconset'), 
		'icon_path_png' =>  img/icons/,
		'icon_default_tag' => 'img',
		'icon_default_type' => 'png',
	),
	'save' => array(
		'png_file_name' => 'disk',
	),
);

Also see Icon Fonts at Themes site

Search Wishes (subject only) [Toggle]

Keywords [Toggle]

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting 7.x
Administration
Ajax 2.x
Articles & Submissions
Backlinks
Banner
Batch 6.x
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution 2.x
Cookie
Copyright
Credits 6.x
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
DogFood
Draw 7.x
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Group
Help
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping 3.x
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Payment 5.x
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Report
Score
Search engine optimization (SEO)
Search
Security
Semantic links 3.x
Shopping Cart 5.x
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tags 2.x
Task
Tell a Friend, alert + Social Bookmarking
TikiTests 2.x
Theme
Toolbar (Quicktags)
Trackers
TRIM
User Administration
User Files
User Menu
Watch
WebHelp
Webmail and Groupmail
WebServices 3.x
Wiki 3D
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives 4.x
WYSIWTSN 4.x
WYSIWYCA
WYSIWYG 2.x
XMLRPC




Useful Tools [Toggle]