V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
1etters
V2EX  ›  问与答

网站现在很流行 icon 直接从字库中引用,这个东西怎么修改呢?

  •  
  •   1etters · 2015-05-22 14:39:22 +08:00 · 3225 次点击
    这是一个创建于 3261 天前的主题,其中的信息可能已经有所发展或是发生改变。
    15 条回复    2016-07-26 22:52:59 +08:00
    1etters
        1
    1etters  
    OP
       2015-05-22 14:44:50 +08:00
    示例代码:.icon-renren:before{content:"\f18b";}
    shiny
        2
    shiny  
       2015-05-22 14:46:22 +08:00   ❤️ 1
    我们用 iconfont.cn ,要改内容就自己上传 svg 文件生成 font
    1etters
        3
    1etters  
    OP
       2015-05-22 14:53:31 +08:00
    @shiny 我用的这个叫Font Awesome,但是目前需要的图标缺不少
    chairuosen
        4
    chairuosen  
       2015-05-22 14:56:02 +08:00
    我们也用 iconfont.cn 自己做。在这赞一个这网站
    1etters
        5
    1etters  
    OP
       2015-05-22 14:57:55 +08:00
    @chairuosen 那Font Awesome有没有办法
    chairuosen
        6
    chairuosen  
       2015-05-22 14:59:38 +08:00
    @1etters 把字体转成svg,加入新svg 重新做
    1etters
        7
    1etters  
    OP
       2015-05-22 15:01:51 +08:00
    @chairuosen 这东西好多文件!FontAwesome.otf fontawesome-webfont.eot fontawesome-webfont.svg
    fontawesome-webfont.ttf fontawesome-webfont.woff
    chairuosen
        8
    chairuosen  
       2015-05-22 15:13:48 +08:00
    @1etters 把那个svg给设计让他拆成一个一个的就可以
    1etters
        9
    1etters  
    OP
       2015-05-22 15:16:15 +08:00
    @chairuosen 明白了
    Phariel
        10
    Phariel  
       2015-05-22 15:20:34 +08:00   ❤️ 1
    lingyired
        11
    lingyired  
       2015-05-22 15:20:42 +08:00
    @1etters 懒的话, fontawesome 不用改,继续引入。 然后自己做一份扩展的。只要 CSS classname 以及 unicode 不冲突就可以了。
    1etters
        12
    1etters  
    OP
       2015-05-22 15:27:29 +08:00
    @lingyired 哥们你有没有发现我这个很奇怪,代码中都是数字的,我以前用过的都是fa fa-wechat这样的
    lingyired
        13
    lingyired  
       2015-05-22 15:29:11 +08:00
    @1etters "\f18b" 这个是 unicode , fa fa-wechat 这个是 class name

    大部分情况下,都是直接使用 class name.
    nanhuo
        14
    nanhuo  
       2015-05-22 18:23:01 +08:00
    单独做一个svg图标,用它生成字体文件(https://icomoon.io/),然后用法就跟font awesome一样
    leungwensen
        15
    leungwensen  
       2016-07-26 22:52:59 +08:00
    来这个项目里找缺失的 icon 吧: http://leungwensen.github.io/svg-icon/ 你可以按需选择图标生成 SVG symbol sprite ,也可以到项目里找单独的 SVG 文件。目前 github 上几乎所有流行的 icon font 我都转换成 SVG 了,有超过 4000 个 SVG 图标可以用。坑已踩完,直接拿去用吧。有任何问题可以到项目里给我提 issue 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   988 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:56 · PVG 05:56 · LAX 14:56 · JFK 17:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.