$Foswiki::cfg{JQueryPlugin}{IconFonts}
setting if not already present:
$Foswiki::cfg{JQueryPlugin}{IconFonts} = { ... 'material' => { 'prefix' => 'ma', 'definition' => '$Foswiki::cfg{PubDir}/$Foswiki::cfg{SystemWebName}/WebFontsContrib/material-icons/material.json', 'css' => '$Foswiki::cfg{PubUrlPath}/$Foswiki::cfg{SystemWebName}/WebFontsContrib/material-icons/font-face.css', }, ... };This will register the
ma
prefix to refer to the given icon definition so that below call to %JQICON will load the appropriate
css and font files:
You type:
%JQICON{"ma-add-alarm"}%You get: where
add-alarm
is the name of an icon. See the full list of all icons below.
%STARTATTACH{"style.css" hidecontent="on"}% .entry { width:18em; line-height:30px; color:inherit; text-decoration:none; white-space:nowrap; overflow:hidden; display:inline-block; } .entry:hover { text-decoration:none; } .entry i { margin:0 14px 0 5px; font-size:24px; } %ENDATTACH% %STARTATTACH{"script.js" hidecontent="on"}% "use strict"; jQuery(function($) { var timer, $overview = $(".overview"), $counter = $(".iconCount");
function filterOverview(val) { var regex = new RegExp(val, "i"), count; if (val=
'') {
count = $overview.find(".entry").show().length;
} else {
count = $overview.find(".entry").hide().filter(function() {
return regex.test($(this).text());
}).show().length;
}
$counter.text(count);
}
$(".filterIcons").on("search", function() {
var $input = $(this);
if (typeof(timer) == 'undefined') {
window.clearTimeout(timer);
}
timer = window.setTimeout(function() {
var val = $input.val();
filterOverview(val);
timer = undefined;
}, 250);
});
filterOverview();
});
%ENDATTACH%
Search: