Добавляем иконки к ссылкам

Hope · 18 Дек 2013

Пользователь Hope разместил новый ресурс:

Добавляем иконки к ссылкам - Добавляем иконки к ссылкам

Код:
Посмотреть вложение 9839

В шаблоне PAGE_CONTAINER находим:

Код:

<head>

И ниже добавляем:

Код:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Далее переходим сюда: admin.php?template-modifications/add и создаём новую модификацию для шаблона:
Шаблон: PAGE_CONTAINER
Найти:

Код:

<link rel="stylesheet" href="css.php?css=xenforo,form,public&style={xen:urlencode $_styleId}&dir=...

Узнать больше об этом ресурсе...

becdelbnik · 23 Янв 2014

Симпатично конечно, но совать в код ссылки на сторонние ресурсы как-то не айс, дело каждого конечно.

MC_Mike · 14 Май 2015

becdelbnik, а почему не айс?

Skaiman · 14 Май 2015

Так практически у всех сейчас FA подключен локально и не будет ссылок со стороннего ресурса :)

MC_Mike · 14 Май 2015

Skaiman, ааа он про fa, я думал про соц сети
Ну это само собой конечно:-)
Они еще и загружаются немножко дольше

Jused · 22 Фев 2016

Скажите, а как сделать одну иконку ко всем ссылкам, пусть то соц. сеть, dropbox и т.д. чтобы у всех была вот такая иконка:

Hope · 22 Фев 2016

.messageText .externalLink:after{content:"\00a0\f08e";font-family:FontAwesome;}

Jused · 22 Фев 2016

Hope написал(а):
.messageText .externalLink:after{content:"\00a0\f08e";font-family:FontAwesome;}

Спасибо!
У меня вопрос еще, я вот добавил это просто в EXTRA.css и не делал ничего больше по инструкции и все работает, для чего тогда все вот эти процедуры проделывать? https://xenforo.info/resources/Добавляем-иконки-к-ссылкам.1301/

Hope · 22 Фев 2016

Возможно FA у Вас уже был подключён до этого.

Jused · 22 Фев 2016

Ага, ну вот и подвох. У меня теперь у ссылок у которых анкор картинка, тоже добавляется эта иконка.

Hope · 22 Фев 2016

Ну так что-то одно используйте. Это отдельная модификация и она не предусматривает никаких совместимостей.

dak · 9 Мар 2016

Обновлю код, добавил некоторые сайты и поправил линки для internalLink, а то у автора они были в извращенном виде :-)

Код:

/* FA ДЛЯ ССЫЛОК */

.messageText .externalLink:after, .messageText .internalLink:after
{font-family: FontAwesome; margin-left: 5px;}

.messageText .externalLink:after{content:"\f08e";}
.messageText .externalLink[href*="apple.com"]:after{content: "\f179";}
.messageText .externalLink[href*="dropbox.com"]:after{content: "\f16b";}
.messageText .externalLink[href*="facebook.com"]:after{content: "\f09a";}
.messageText .externalLink[href*="flickr.com"]:after{content: "\f16e";}
.messageText .externalLink[href*="github.com"]:after{content: "\f113";}
.messageText .externalLink[href*="plus.google.com"]:after{content: "\f0d5";}
.messageText .externalLink[href*="instagram.com"]:after{content: "\f16d";}
.messageText .externalLink[href*="microsoft.com"]:after{content: "\f17a";}
.messageText .externalLink[href*="ok.ru"]:after{content: "\f263";}
.messageText .externalLink[href*="onedrive.live.com"]:after{content: "\f0ed";}
.messageText .externalLink[href*="steam.com"]:after{content: "\f1b6";}
.messageText .externalLink[href*="tumblr.com"]:after{content: "\f173";}
.messageText .externalLink[href*="twitter.com"]:after{content: "\f099";}
.messageText .externalLink[href*="vimeo.com"]:after{content: "\f27d";}
.messageText .externalLink[href*="vk.com"]:after{content: "\f189";}
.messageText .externalLink[href*="youtube.com"]:after{content: "\f16a";}
.messageText .internalLink[href*="/"]:after{content: "\f101";}
.messageText .internalLink[href*="/resources"]:after{content: "\f019";}
.messageText .internalLink[href*="/media"]:after{content: "\f03e";}

Результат:

Не совсем понял назначение
\00a0
в коде, работает и без этого.
Даже больше скажу, если делать модификацией, то как раз эти символы мешают, мод не применяется.

Jused · 9 Мар 2016

dak написал(а):

Обновлю код, добавил некоторые сайты и поправил линки для internalLink, а то у автора они были в извращенном виде :-)

Код:

/* FA ДЛЯ ССЫЛОК */

.messageText .externalLink:after, .messageText .internalLink:after
{font-family: FontAwesome; margin-left: 5px;}

.messageText .externalLink:after{content:"\f08e";}
.messageText .externalLink[href*="apple.com"]:after{content: "\f179";}
.messageText .externalLink[href*="dropbox.com"]:after{content: "\f16b";}
.messageText .externalLink[href*="facebook.com"]:after{content: "\f09a";}
.messageText .externalLink[href*="flickr.com"]:after{content: "\f16e";}
.messageText .externalLink[href*="github.com"]:after{content: "\f113";}
.messageText .externalLink[href*="plus.google.com"]:after{content: "\f0d5";}
.messageText .externalLink[href*="instagram.com"]:after{content: "\f16d";}
.messageText .externalLink[href*="microsoft.com"]:after{content: "\f17a";}
.messageText .externalLink[href*="ok.ru"]:after{content: "\f263";}
.messageText .externalLink[href*="onedrive.live.com"]:after{content: "\f0ed";}
.messageText .externalLink[href*="steam.com"]:after{content: "\f1b6";}
.messageText .externalLink[href*="tumblr.com"]:after{content: "\f173";}
.messageText .externalLink[href*="twitter.com"]:after{content: "\f099";}
.messageText .externalLink[href*="vimeo.com"]:after{content: "\f27d";}
.messageText .externalLink[href*="vk.com"]:after{content: "\f189";}
.messageText .externalLink[href*="youtube.com"]:after{content: "\f16a";}
.messageText .internalLink[href*="/"]:after{content: "\f101";}
.messageText .internalLink[href*="/resources"]:after{content: "\f019";}
.messageText .internalLink[href*="/media"]:after{content: "\f03e";}

Результат:

Посмотреть вложение 50048

Не совсем понял назначение
\00a0
в коде, работает и без этого.
Даже больше скажу, если делать модификацией, то как раз эти символы мешают, мод не применяется.

К BB коду изображения тоже подставляются иконки?

dak · 9 Мар 2016

Jused написал(а):
К BB коду изображения тоже подставляются иконки?

А причем тут это, но отвечу, да, но это уже в другой теме смотри.

Skaiman · 9 Мар 2016

dak написал(а):
А причем тут это, но отвечу, да, но это уже в другой теме смотри.

Он просто спросил про внешние ссылки картинкой, что иконка ссылки к ним тоже показывается и он хотел бы, что бы этого не было :)

evgen583 · 10 Сен 2016

Доброго времени суток всем,Перешёл по admin.php?template-modifications/add и создаёл новую модификацию для шаблона:
Шаблон: PAGE_CONTAINER а вот что писать в Ключ модификации:

Skaiman · 10 Сен 2016

evgen583 написал(а):
а вот что писать в Ключ модификации:

ключ писать :) придумай оригинальный

evgen583 · 10 Сен 2016

Skaiman написал(а):
ключ писать :-) придумай оригинальный

это как орегинальный?

Dead Master · 10 Сен 2016

evgen583 написал(а):
это как орегинальный?

ну придумай свой ключ:
Пупкин, Пупкин2

Kolya groza morey · 10 Сен 2016

evgen583 написал(а):
это как орегинальный?

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Добавляем иконки к ссылкам

Hope

becdelbnik

MC_Mike

Skaiman

MC_Mike

Jused

Hope

Jused

Hope

Jused

Hope

dak

Jused

dak

Skaiman

evgen583

Skaiman

evgen583

Dead Master

Kolya groza morey

Похожие темы

Мы ценим вашу конфиденциальность