ファイル拡張子に応じてアイコンを変更してください

Question

こんにちは私は子供が特定のファイル拡張子を含む場合、親ノードのアイコンを変更することが可能かどうか質問を受けました。

いくつかのコードで自分自身を説明させてください。以下のCSSで

<span class="file"> 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
</span> 
<span class="file"> 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
</span> 
<p> 
Should show up a word icon 
</p> 
<span class="file"> 
    <a href="../someurl/word-test.docx" class="">Word document</a> 
</span> 

：

span.file{ 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
    display: block; 
} 
span.file a[href$=".docx"] { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
} 

それはファイルの拡張子に応じて、<span>の背景を変更することは可能です私は次のセットアップを持っていますか？下のデモで見られるように、Wordアイコンが生成されますが、現在のPDFアイコンは置き換えられません。

HTMLがDNN内のモジュールを通じてレンダリングされるため、HTMLを変更できないことに注意してください。したがって、純粋なCSSだけのソリューションか、おそらくJavascriptの助けを必要とするソリューションが必要です。

DEMO HERE

Answer 1

はanchor代わりのspanにbackground-imageを使用してください。 Updated Fiddle

span.file { 
 
    display: block; 
 
    padding: 1px 0px; 
 
} 
 
span.file a[href$=".docx"] { 
 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') left center no-repeat; 
 
    padding-left: 20px; 
 
} 
 
span.file a[href$=".pdf"] { 
 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') left center no-repeat; 
 
    padding-left: 20px; 
 
}

<span class="file"> 
 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
 
</span> 
 
<span class="file"> 
 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
 
</span> 
 
<p> 
 
    Should show up a word icon 
 
</p> 
 
<span class="file"> 
 
    <a href="../someurl/word-test.docx" class="">Word document</a> 
 
</span>

Answer 2

私はあなたを誤解しているかもしれませんが、これはChromeで動作します。 spanではなく、元の.fileをaに設定してください。

span.file a { 
 
    padding: 1px 0 1px 20px; 
 
    display: block; 
 
} 
 
span.file a[href$=".docx"] { 
 
    /* Overwrite background */ 
 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
 
} 
 

 
span.file a[href$=".pdf"] { 
 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
 
} 
 

 
span.file a[href$=".xls"] { 
 
    /* Overwrite background */ 
 
    background: url('http://image.chromefans.org/fileicons/format/xls.png') 0 0 no-repeat; 
 
}

<span class="file"> 
 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
 
</span> 
 
<span class="file"> 
 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
 
</span> 
 
<p> 
 
Should show up a word icon 
 
</p> 
 
<span class="file"> 
 
    <a href="../someurl/word-test.docx" class="">Word document</a> 
 
</span> 
 
<span class="file"> 
 
    <a href="../someurl/excel-test.xls" class="">Excel document</a> 
 
</span>

Answer 3

私が見たフィドルは、PDFファイルとPDFとのdocxファイルのためのワードアイコンの両方のためのPDFアイコンを表示されました。また、要素にアイコンを追加するので、要素ではなくTHATを埋め込む必要があります。

これは動作するようです：

span.file a{ 
    padding: 1px 0 1px 20px; 
    display: block; 
} 
span.file a[href$=".docx"] { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
} 

span.file a[href$=".pdf"] { 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
} 

Answer 4

あなたはspanにクラスを適用するだけでCSSとDOMを上るする方法がないよう、いくつかのJavascript/jQueryのを使用する必要があります。ここではあなたが何であるかを達成するために少しのjQueryを使用したソリューションです後：

http://codepen.io/mikehdesign/pen/EyZdRm

HTML

<span class="file"> 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
</span> 
<span class="file"> 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
</span> 
<p> 
Should show up a word icon 
</p> 
<span class="file"> 
    <a href="../someurl/word-test.docx">Word document</a> 
</span> 

CSS

span.file{ 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
    display: block; 
} 

span.file.word { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
} 

jQueryの

$("a[href$='pdf']").parent('span').addClass('pdf'); 

$("a[href$='docx']").parent('span').addClass('word'); 

他の記事で特定されたようあなたの代わりにaに背景を適用すると、OKであれば、あなただけの

Answer 5

span.file a[href$=".pdf"]{ 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
    display: block; 
} 
span.file a[href$=".docx"] { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
}