5

私のチームは、私たちのサイトにあるさまざまな種類のメディア ファイルへのリンクの後にアイコンを挿入するためのベスト プラクティスについて議論していました。例としては、PDF へのリンクと、それが PDF であることをユーザーに知らせるためにアイコン画像を挿入したい場合があります。同じことがビデオまたはオーディオファイルにも使用できます。

私は、CSS を使用してクラスを配置し、:after を使用して要素を作成することを提案しました。

IE6 と IE7 は疑似 CSS クラスをサポートしないことを思い出しましたが、それ以外に、より良い方法はありますか?

リンクが順序付けされていないリストにある場合、アイコン画像を使用して黒丸文字を置き換えることができることは知っていましたが、段落やその他の HTML 要素については確信が持てませんでした.

4

6 に答える 6

6

疑似クラスの前でも後でも使用できますが、それが1つの方法だと思います。

ただし、リンクに少し余分なパディングを追加して背景画像を入力するだけでそれを行うことができます。サブストリング属性セレクターを使用して拡張機能を介してリンクを選択（ターゲット）できるため、クラスを追加する必要もありません。 。

例えば

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;
}

詳細については、このページをチェックしてください

于 2011-07-06T21:03:42.697 に答える
2

CSS3 を使用して各リンクに PDF やその他のアイコンを表示する簡単な方法:

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;
}
于 2016-07-26T10:47:32.013 に答える
1

インライン要素の左右のパディング作業。だからあなたは次のようなことをすることができます...

HTML

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

CSS

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

この例を参照してください。

于 2011-07-06T21:00:49.387 に答える
1

スクリプト作成に反対しない場合は、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;}

これにより、文/リンクの前にアイコンが配置されます。

于 2011-07-06T21:19:32.840 に答える
0

また、CSS疑似要素に固執し、古いブラウザーではかなり劣化します。IE <= v7を使用しているIMHOの人々は、美しいWebサイトを見たくありません。ステータスバーを読むことで、リンクされたファイルタイプを認識することもできます。

于 2011-07-06T20:55:42.253 に答える
0

で右側に配置された背景画像を使用しno-repeat、要素の右側にアイコンの幅 (プラス間隔のための数ピクセル) に等しいパディングを追加します。

a.pdf {
    background: url(pdficon.png) no-repeat right center;
    padding-right: 18px; /*width of the space you want to leave for the icon*/
}
于 2011-07-06T21:24:56.130 に答える