在后续版本中，Icon组件是否考虑支持font-awesome图标？

forcszhangguoyu commented 7 years ago

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

QingWei-Li commented 7 years ago

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

forcszhangguoyu commented 7 years ago

那么，像Input 组件然后使用fa的图标呢？

QingWei-Li commented 7 years ago

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

forcszhangguoyu commented 7 years ago

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

QingWei-Li commented 7 years ago

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

QingWei-Li commented 7 years ago

我看了下 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 commented 7 years ago

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

michaellyu commented 7 years ago

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

ghost commented 7 years ago

https://github.com/ElemeFE/element/issues/1054#issuecomment-260294522 the code snippet is not working . did you tested it ?

ruixiu commented 7 years ago

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

ruixiu commented 7 years ago

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

ruixiu commented 7 years ago

搞定了，这样写

<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 commented 7 years ago

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 commented 7 years ago

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

Leopoldthecoder commented 7 years ago

A demo: https://github.com/ElementUI/element-font-awesome

osman-mohamad commented 7 years ago

thank you @Leopoldthecoder

maimake commented 7 years ago

sass 怎么弄？也是没出来

Wizard67 commented 7 years ago

@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 commented 7 years ago

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

qinaichen commented 6 years ago

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

ParkLai commented 6 years ago

@Wizard67

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

Wizard67 commented 6 years ago

@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 不同）。

ParkLai commented 6 years ago

@Wizard67

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

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

Even-Lau commented 5 years ago

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

ElemeFE / element