Как лучше всего размещать значок до или после ссылки для обозначения типа файла (например, ссылки на Adobe PDF, аудио или видео) - PullRequest
Новая
       6

Как лучше всего размещать значок до или после ссылки для обозначения типа файла (например, ссылки на Adobe PDF, аудио или видео)

4 голосов
/ 07 июля 2011

Моя команда обсуждала, как лучше всего вставить значок после ссылок на различные типы файлов мультимедиа, которые есть на нашем сайте. В качестве примера можно привести ссылку на PDF-файл и желание вставить изображение значка, чтобы пользователи знали, что это PDF-файл. То же самое можно использовать для видео или аудио файлов.

Я предложил использовать CSS, надеть класс и использовать: after для создания элемента.

Я помню, что IE6 и IE7 не будут поддерживать псевдо-CSS-класс, но кроме этого, будет ли лучшая практика?

Если бы ссылки были в неупорядоченном списке, я знаю, что изображение значка можно использовать для замены символа маркера, но я не был уверен в абзацах или других элементах HTML.

Ответы [ 6 ]

5 голосов
/ 07 июля 2011

Вы можете использовать до или после псевдо-классов, и я думаю, что это будет одним из способов,

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

например, 

a[href$='.pdf'] {
  background: transparent url(pdf-icon.gif) center right no-repeat;
  padding-right: 20px;
}

Использование селектора атрибутов также будет работать для ваших :before или :after сгенерированных элементов, и вы можете превратить их во встроенный блок, достаточно большой, чтобы содержать изображение в качестве фона.

Например 

a[href$='.pdf']:after {
   content: url(pdf-icon.gif);
   margin-left: 4px;
   display: inline-block;
   width: 12px;
   height: 12px;
}

проверить эту страницу для более подробного объяснения

2 голосов
/ 26 июля 2016

Простой способ принести PDF или другой значок с каждой ссылкой, используя CSS3:

1. иконка через фоновое изображение -> код CSS: 

a[href$=".pdf"]
{
  background:url("your-pdf-image.png") no-repeat left;
  padding-left:25px;
}

2. принести значок из FontAwesome -> Код CSS: 

a[href$=".pdf"]:before
{
  content:"\f1c1  "; /* here you can paste the icon content from fontawesome, like word, excel, pdf,etc.. */
  font-family: fontawesome;
}
1 голос
/ 07 июля 2011

Если вы не против написания сценариев, вы можете сделать что-то подобное с jQuery 

$("a[href$='.pdf']").addClass("pdf");
$("a[href$='.doc']").addClass("doc");
$("a[href$='.rtf']").addClass("doc");
$("a[href^='mailto:']").addClass("email");

и css 

a.pdf {background: url(../images/icons/pdf_icon.png) no-repeat left center; 
padding-left: 20px; line-height: 16px;}

. Это ставит значок перед предложением./link.

1 голос
/ 07 июля 2011

левые и правые отступы для встроенных элементов .так что вы можете сделать что-то вроде ...

HTML 

<a href="some.pdf" class="pdf" />View</a>

CSS 

.pdf {padding-left:12px; background:url(pdf.png) no-repeat 2px 3px;}

См. этот пример.

0 голосов
/ 07 июля 2011

Используйте фоновое изображение, расположенное справа с помощью no-repeat, и добавьте отступ справа от элемента, равный ширине иконки (плюс несколько пикселей для разрыва).

0 голосов
/ 07 июля 2011

Я бы также придерживался псевдоэлемента CSS, что неплохо для старых браузеров.ИМХО люди, которые используют IE <= v7, не хотят видеть красивые веб-сайты - вы также можете узнать связанный тип файла, прочитав строку состояния. </p>

...