Что такое хороший «шаблон визуального дизайна» для ссылок, содержащих значки? - PullRequest
Новая
       7

Что такое хороший «шаблон визуального дизайна» для ссылок, содержащих значки?

1 голос
/ 29 февраля 2012

Я хотел бы создать ссылки с иконками, включенными в ссылку.

Например, взять измененную версию ссылок chat / meta / faq из переполнения стека.

Вот одна попытка .

HTML 

<div id='clickable'>
  <a href="#chat">
    <div class='so-icon'></div>
    chat
  </a>
  ...
</div>

CSS 

#clickable div {
  display:inline-block;
  vertical-align: middle;
}
.so-icon {
  background-image:url(http://www.madhur.co.in/images/icon_stackoverflow3.png);
  width: 30px;
  height: 30px;
}
a {
  text-decoration: none;    
  margin-right: 10px;
}
a:hover {
  text-decoration: underline;
}

Одна проблемас этим дизайном подчеркивание (наведите курсор на ссылку, чтобы увидеть) появляется не только на тексте ссылки, но и на некоторых пробелах до этого.

enter image description here

ПараЯ могу придумать следующие решения:

  • Наличие двух отдельных <a> элементов, одного для значка и одного для текста.Нарушает DRY .
  • Не использует элементы вообще, а использует javascript для реализации функциональности ссылки, одновременно стилизуя элементы icon и text / span отдельно.

Разве это не то, что должно быть возможно выполнить только с использованием CSS и без необходимости прибегать к javascript?

Ответы [ 4 ]

2 голосов
/ 29 февраля 2012

Итак, решение без дополнительной разметки или псевдоэлементов, основанное на @ sandeep's.

http://jsfiddle.net/z4Gs2/2/

1 голос
/ 29 февраля 2012

Вы можете применить фоновое изображение непосредственно к тегу. Примерно так: 

<a href="#chat" class="so-icon">chat</a>
<a href="#meta" class="so-icon">meta</a>
<a href="#faq" class="so-icon">faq</a>

с CSS: 

.so-icon {
  background:url(http://www.madhur.co.in/images/icon_stackoverflow3.png) no-repeat left center;
  width: 30px;
  height: 30px;
}
a {
  display: inline-block;
  text-decoration: none;
  padding-left: 35px;
  margin:10px;
  line-height: 30px;
}
a:hover {
  text-decoration: underline;
}
1 голос
/ 29 февраля 2012

как это ??

http://jsfiddle.net/HBawG/

a p:hover {
  text-decoration: underline;
}

Я пытался отредактировать вашу работу

Надеюсь, я помог.

0 голосов
/ 29 февраля 2012

Вы должны удалить возврат каретки между вашим div (изображением) и текстом гиперссылки (чтобы избежать нежелательных пробелов) Затем вы должны изменить класс CSS .so-icon, добавив margin-right: 5px (например)

Здесь вы можете найти модифицированную версию вашего примера. http://jsfiddle.net/q2vE4/4/

...