Поскольку libn wheelnav.js позволяет программисту определять пункт меню как текст или изображение.Никогда и то и другое одновременно для одного элемента меню, и мне нужен значок + текст, я придумал значок кодирования как юникодную сущность, что не сложно, поскольку я использую Font Awesome.
К сожалению из того, что я понялИсходный код wheelnav.js, лежащий в основе raphael.js при создании текстового узла SVG (и его дочернего элемента tspan), экранирует специальные символы и изменяет & в &, в результате чего сущность отображается буквально вместо соответствующего значка.
Единственное решениеЯ придумал, чтобы скопировать символ (иконку) с сайта Font Awesome в строку заголовка.Это работает, в браузере я вижу значок, но в своей IDE я вижу только прямоугольник.
Это делает его неясным и нечитаемым для других разработчиков, и я не могу ожидать, что они установят Font Awesome в своих IDE.
Есть ли какой-нибудь другой умный способ предотвратить экранирование wheelnav.js (Raphael.js) специальными символами или любое другое решение моей проблемы?
var icons = {
'key': '',
'cogs': '',
'connection': '' //copypasting character, that would work.
};
var items = [ {title: icons.key + 'Security'},
{title: icons.cogs + 'Settings'},
{title: icons.connection + 'Connection'} ];
var piemenu = new wheelnav('main_menu');
piemenu.initWheel(items.map(function(item){
return item.title;
}));
piemenu.createWheel();
JSFiddle
Как это выглядит:
Как этодолжно выглядеть так:
Спасибо за помощь:)