Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在后续版本中,Icon组件是否考虑支持font-awesome图标? #1054

Closed
forcszhangguoyu opened this issue Nov 14, 2016 · 24 comments
Closed

Comments

@forcszhangguoyu
Copy link

@forcszhangguoyu forcszhangguoyu commented Nov 14, 2016

目前的ICON数量有限,在后续版本中,Icon组件是否考虑支持font-awesome图标,以弥补目前图标不足的情况?

@QingWei-Li

This comment has been minimized.

Copy link
Contributor

@QingWei-Li QingWei-Li commented Nov 14, 2016

没必要加进来吧,自己安装 font-awesome 不是一样么

@forcszhangguoyu

This comment has been minimized.

Copy link
Author

@forcszhangguoyu forcszhangguoyu commented Nov 14, 2016

那么,像Input 组件然后使用fa的图标呢?

@QingWei-Li

This comment has been minimized.

Copy link
Contributor

@QingWei-Li QingWei-Li commented Nov 14, 2016

如果这样的话可以考虑做成另一个插件,作用就是把其他图标库的 icon 的命名规则改成 element icon 的

@forcszhangguoyu

This comment has been minimized.

Copy link
Author

@forcszhangguoyu forcszhangguoyu commented Nov 14, 2016

这个方案有考虑过,但是感觉这样修改代码不友好,建议支持fa,或者提供扩展第三方图标库的方案,谢谢!

@QingWei-Li

This comment has been minimized.

Copy link
Contributor

@QingWei-Li QingWei-Li commented Nov 14, 2016

肯定不用直接改代码,我考虑下写一个吧

@QingWei-Li

This comment has been minimized.

Copy link
Contributor

@QingWei-Li QingWei-Li commented Nov 14, 2016

我看了下 fa 是有提供 Less 和 Sass 版本的,那么完全可以自己 build 一份,我简单写了个 Less 的

[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome!important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@import url("../node_modules/font-awesome/less/font-awesome");
@fa-css-prefix: el-icon-fa;

这样就可以在 Element 里使用了,例如 input 就可以写成

<el-input icon="fa-check" />

感觉没必要写成插件了

@furybean

This comment has been minimized.

Copy link
Contributor

@furybean furybean commented Nov 14, 2016

@QingWei-Li 可以考虑放到 FAQ 里面去。

@michaellyu

This comment has been minimized.

Copy link

@michaellyu michaellyu commented Nov 18, 2016

Icon可以支持iconmoon搜集的svg图标吗?怎么使用呢?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Feb 18, 2017

#1054 (comment)
the code snippet is not working . did you tested it ?

@ruixiu

This comment has been minimized.

Copy link

@ruixiu ruixiu commented Apr 27, 2017

我按照这种方式实现,图标还是出不来

@ruixiu

This comment has been minimized.

Copy link

@ruixiu ruixiu commented Apr 27, 2017

按照@QingWei-Li给的方式,在input中使用图标显示小方块,在i标签中使用class="el-icon-fa-user"显示也是小方块。如果把fa-css-prefix改为el-iconfa,在i标签中使用class="el-iconfa-user"正常,input仍然无效。望解答

@ruixiu

This comment has been minimized.

Copy link

@ruixiu ruixiu commented Apr 27, 2017

搞定了,这样写

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less">
  [class^="el-icon-fa"], [class*=" el-icon-fa"] {
    font-family:"FontAwesome" !important;
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @import url("../node_modules/font-awesome/less/font-awesome");
  @fa-css-prefix: el-icon-fa;
# **必须在最后,不然图标出不来**
  @import url("../node_modules/element-ui/lib/theme-default/index.css");
</style>
@allanruin

This comment has been minimized.

Copy link

@allanruin allanruin commented Jul 11, 2017

what if I just use elementui by including the css file, how can I use fontawesome with elementUI? I try this <i class="fa fa-refresh fa-1" aria-hidden="true"></i> however it just shows a empty square in the button..like @ruixiu had mentioned.

@osman-mohamad

This comment has been minimized.

Copy link

@osman-mohamad osman-mohamad commented Aug 9, 2017

any news about this issue ? I am not using this project because of this problem .

@Leopoldthecoder

This comment has been minimized.

Copy link
Contributor

@Leopoldthecoder Leopoldthecoder commented Aug 10, 2017

@osman-mohamad

This comment has been minimized.

Copy link

@osman-mohamad osman-mohamad commented Aug 11, 2017

thank you @Leopoldthecoder

@maimake

This comment has been minimized.

Copy link

@maimake maimake commented Aug 19, 2017

sass 怎么弄? 也是没出来

@Wizard67

This comment has been minimized.

Copy link

@Wizard67 Wizard67 commented Aug 20, 2017

@maimake

<style lang="scss">
  i[class^="el-icon-fa"], i[class*=" el-icon-fa"] {
    font-family:"FontAwesome" !important;
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  $fa-font-path: "~font-awesome/fonts";
  $fa-css-prefix: "el-icon-fa";

  @import "~font-awesome/scss/font-awesome.scss";
</style>
@WangHansen

This comment has been minimized.

Copy link

@WangHansen WangHansen commented Sep 25, 2017

@Wizard67 you should create a repo or include this in the official doc, great help, thanks

@qinaichen

This comment has been minimized.

Copy link

@qinaichen qinaichen commented Dec 6, 2017

2.0之后的版本有点已经不支持https://github.com/ElementUI/element-font-awesome中的写法了

@Laipak

This comment has been minimized.

Copy link

@Laipak Laipak commented Jul 13, 2018

@Wizard67

您提供的方法没办法应用在FontAwesome5上,有任何建议吗?

@Wizard67

This comment has been minimized.

Copy link

@Wizard67 Wizard67 commented Jul 13, 2018

@Laipak
你好,看了下 FontAwesome5 的包,项目的结构有着较大的变化,所以你可以参照如下的方式进行添加(这里以 free 版本为例)

installation

$ npm install @fortawesome/fontawesome-free --save

definition

<style lang="scss">
  i[class^="el-icon-fa"], i[class*=" el-icon-fa"] {
    font-family:"Font Awesome 5 Free" !important;
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
  $fa-css-prefix: "el-icon";

  @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
</style>

usage

  <i class="el-icon-fa-address-book"></i>

需要注意的是 fontawesome 中将 Brands 的图标单独抽离了,如果你的项目需要用到此类图标,那么可以提供一个单独的 CSS class 声明(差异在于声明的 font-family 不同)。

@Laipak

This comment has been minimized.

Copy link

@Laipak Laipak commented Jul 16, 2018

@Wizard67

尝试了您的方式,一开始icon显示为格子(),必须要附上相对应的scss才能正常运作:

@import '~@fortawesome/fontawesome-free/scss/fa-regular';
@Even-Lau

This comment has been minimized.

Copy link

@Even-Lau Even-Lau commented Mar 25, 2019

fontawesome-free: "^5.8.1", @这个版本中有三种字体solid, regular, light, 这样做图标全部都是solid, 有没有方法选择regular字体?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.