代码之家  ›  专栏  ›  技术社区  ›  ewernli

用CSS向链接添加图标的标准方法是什么?

css
  •  7
  • ewernli  · 技术社区  · 14 年前

    我习惯用 padding background-image 在链接旁边放置图标。

    这种方法有很多例子。这里有一个 here

     <a class="external" href="http://www.othersite.com/">link</a>
    
      a.external {  
         padding-right: 15px;  
         background: transparent url(images/external-link-icon.gif) no-repeat top right;  
     }    
    

    但大多数浏览器不打印背景图像,这很烦人。

    是什么 这个


    编辑

    CSS呢 :before :after

    a.test:after {
        padding-right: 5px;
        content: url(../pix/logo_ppk.gif);
    }
    
    2 回复  |  直到 14 年前
        1
  •  3
  •   Oli    14 年前

    我会亲自填充它,并通过CSS类放置背景图像(就像您的示例一样)。这是迄今为止最轻松的路线,它使文档保持轻松和语义。

    如果印刷真的很重要(我的意思是 )粘贴一个真实的图像在那里,但要注意,它确实从语义方面搞砸了标记。

    也许一个更好的折衷方案是使用一个“可打印的版本”,它使用图像来代替(通过服务器大小或者用实际的图像替换CSS类的JS)。

        2
  •  0
  •   Jitendra Vyas    14 年前

    但是如果你能使用javascript,那么这个方法就适合你了

    http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links