Здесь я делаю великое открытие об использовании селекторов jQuery для добавления псевдоэлементов на страницу html.
Как же работают Joomla Standard Icomoon Fonts? Шрифты занимают изрядную часть файла template.css, и, чтобы код в файле работал, в него подгружаются псевдошрифты /media/jui/fonts/IcoMoon.eot...
А после подгрузки странный контент становится рабочим .icon-cancel-circle_1:before {content: "\e217"; } ... Однако, здесь (Jupyter)у меня не получилось импортировать эти шрифты..., почему, сразу не сообразил. Здесь незнакомый Font Awesome ... Потому решил попробовать радикальное средство jQuery("...").toggleClass("...")...
Joomla Standard Icomoon Fonts
Icons Tutorial
jQuery - css() Method
jQuery - Get and Set CSS Classes
CSS content Property
css-tricks.com
jQuery selectors demo Click a selector to see which element(s) gets selected in the result
jQuery selectors
Сначала я просто попробовал The complete set of 605 icons in Font Awesome 4.5.0 - они уже есть в notebook (!!!)¶
Откуда эти классы, уже и не припомню, но работают прямо здесь (нашел в теге head codemirror). Вспомнил, это из раскрывающегося кода меню (справа с иконками) на странице Joomla Standard Icomoon Fonts
%%html
<i class="fa fa-file fa-fw">==$0</i>
%%html
<style type"text/css">
.drop-icon {
display: inline;
margin-right: 4px;
}
div {
line-height: 1.60em;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
margin: 0;
padding: 0;
direction: ltr;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<div class="drop-icon" style="background-color:yellow; font-size:24px;"><i class="fa fa-comments-o fa-fw"></i></div>
Раз все получилось, скопируем весь код и посмотрим, что получается
%%html
<ul id="drop1" class="views large-12 columns f-dropdown right open" style="top: 52px; right: 23px;">
<li id="ca-nstab-j3.x" class="selected"><a href="/J3.x:Joomla_Standard_Icomoon_Fonts">
<div class="drop-icon">
<i class="fa fa-file fa-fw"></i>
</div>J3.x</a>
</li>
<li id="ca-talk" class="new">
<a href="/index.php?title=J3.x_talk:Joomla_Standard_Icomoon_Fonts&action=edit&redlink=1"
title="Обсуждение основной страницы [alt-shift-t]" accesskey="t">
<div class="drop-icon">
<i class="fa fa-comments-o fa-fw"></i></div>Обсуждение</a>
</li>
<li id="ca-viewsource">
<a href="/index.php?title=J3.x:Joomla_Standard_Icomoon_Fonts&action=edit"
title="Эта страница защищена от изменений, но вы можете посмотреть и скопировать её исходный текст [alt-shift-e]"
accesskey="e">
<div class="drop-icon">
<i class="fa fa-code fa-fw"></i>
</div>Просмотр</a>
</li>
<li id="ca-history">
<a href="/index.php?title=J3.x:Joomla_Standard_Icomoon_Fonts&action=history"
title="Журнал изменений страницы [alt-shift-h]" accesskey="h">
<div class="drop-icon">
<i class="fa fa-history fa-fw"></i></div>История</a>
</li>
</ul>
Не очень красиво, но что же это за классы, какие имеют отношение к картинкам?
%%html
<div class="drop-icon">
<i class="fa fa-history fa-fw"></i></div>История
%%html
<div class="drop-icon">
<i class="fa-history fa-fw"></i></div>История
%%html
<div class="drop-icon">
<i class="fa fa-history "></i></div>История
%%html
<div class="drop-icon">
<i class="fa fa-fw"></i></div>История
%%html
<div class="drop-icon">
<i class="fa-history"></i></div>История
Выше был шрифт сщвуьшккщк с этой страницы, а теперь попробуем код из Joomla Protostar template.css
%%html
<style type"text/css">
.icon-cancel-circle:before {
content: "\e217";
}
</style>
<div class="icon-cancel-circle">
Иконка отмены</div>
Не работает ... было бы странно, если бы работал... Шрифты то разные... В Icons Tutorial три штуки, да еще этот миррор... Пробуем наскоро чего-нибудь запомнить...
Ниже я попробовал зарузить IcoMoon... а потом подгрузить псевдокартинку..., но не получилось..., помогли только радикальные меры ...см. ниже
%%html
<style type"text/css">
@font-face {
font-family: 'IcoMoon';
src: url('../../../media/jui/fonts/IcoMoon.eot');
src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('../../../media/jui/fonts/IcoMoon.woff') format('woff'),
url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'),
url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: 'IcoMoon';
content: attr(data-icon);
speak: none;
}
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-right: .25em;
line-height: 14px;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'IcoMoon';
font-style: normal;
speak: none;
}
[class^="icon-"].disabled,
[class*=" icon-"].disabled {
font-weight: normal;
}
.icon-joomla:before {
content: "\e200";
}
/**/
.icon-cancel-circle_1:before {
content: "\e217";
}
</style>
<div class="icon-cancel-circle_1">
Иконка отмены</div>
Желтый цвет получен после выполнения кода jQuery... см. ниже в [24] ячеййке
jQuery Manipulating CSS¶
jQuery has several methods for CSS manipulation. We will look at the following methods: •addClass() - Adds one or more classes to the selected elements •removeClass() - Removes one or more classes from the selected elements •toggleClass() - Toggles between adding/removing classes from the selected elements •css() - Sets or returns the style attribute
%%javascript
jQuery("li").toggleClass("icon-arrow-right-3");
Выше код, который я запустил в консоли на странице Джумлы... во всех списках моментально появилась стрелка вправо, этот прием будем использовать при подборе стилей..., очень удобно
Итак, код выше позволяет быстро вставлять в теги заранее подготовленные классы. А можно еще вставлять стили прямо в код, покрасим неудачный пример [20] в желтый цвет:
%%javascript
jQuery(".icon-cancel-circle_1").css("background-color", "yellow");
И, наконец, запомним, как добавлять сразу несколько инлайн стилей... Мало ли... Однако, здесь все в кавычках... json, однако... (песня чукчи).
%%javascript
$("p").css({"background-color": "yellow", "font-size": "200%"});
А вот рабочий вариант для экспериментов со стилями боковых меню Protostar
jQuery('.well li[class*="item-"]').toggleClass("icon-arrow-right-3");
#aside{
position:fixed;
top: 0;
right:0;
}
jQuery('#aside').toggle();
#aside {
position: fixed;
width: 250px;
overflow-y: scroll;
top: 0;
bottom: 0;
}
jQuery('.well .nav-child>li[class!=deeper]>a').toggleClass("icon-pause-circle");
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий