如何实现 github.com 之类的图标字体

Posted 2023-02-24

【中文标题】如何实现 github.com 之类的图标字体

【英文标题】：How to implement icon fonts like github.com

【发布时间】：2013-04-07 00:19:22

【问题描述】：

如何实现图标字体？

Github 在其网页上广泛使用它们，但试图重现它们的实现会导致失败。

https://github.com/styleguide/css/7.0

在此处查看尝试的实现：

http://jsfiddle.net/spuder/jsmzm/7/

<div id="github">

    <span class="mega-icon mega-icon-blacktocat"></span>

</div>


.mega-icon-blacktocat 
    content:"\f209";

我已经阅读了很多关于图标字体的页面，并且通过了几个教程都没有成功

How to use icon fonts

http://css-tricks.com/examples/IconFont/

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-ever-thought-about-using-font-face-for-icons/

Placing Unicode character in CSS content value

初学者。

更新 2013-4-11 提供的解决方案在 WebKit 中效果很好，在 firefox 20.0 中不起作用 http://jsfiddle.net/jsmzm/10/

【参考方案1】：

here is your fiddle updated 基本上你在 span 标签中缺少 data-icon 属性

  <div id="github"> 
<span data-icon="" class="mega-icon mega-icon-blacktocat"></span>

和你的css中的参考

[data-icon]:before 
  font-family:'Octicons Regular';
  content: attr(data-icon);
  speak: none; 

【讨论】：

太棒了！我注意到您使用了实际的 UTF 字符  。有没有办法改用 ascii 值？我正在尝试 data-icon="\f209" 没有运气。

【参考方案2】：

这是How to Use Icon Fonts in Your Website上的一篇很好的文章

【参考方案3】：

大多数浏览器不支持 content 属性来替换元素的内容。它实际上只用于伪元素。

http://jsfiddle.net/jsmzm/11/

.mega-icon-blacktocat:before 
    content:"\f209";