# Iconfont 使用方法

- title_en: Iconfont usage
- order: 0

---

```js
<NukePlayGround>
  Iconfont({
    name: 'your-unique-font-name',
    url: 'ttf file url'
  });
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Iconfont from 'nuke-iconfont';
import Layout from 'nuke-layout';
import Page from 'nuke-page';
const { MultiRow } = Layout;

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      gridData: [
        { icon: '\ue60f', name: '直播' },
        { icon: '\ue608', name: '消息' },
        { icon: '\ue606', name: '浏览' },
        { icon: '\ue600', name: '时间' },
        { icon: '\ue605', name: '圆点' },
        { icon: '\ue607', name: '感叹号' },
        { icon: '\ue603', name: '上' },
        { icon: '\ue604', name: '下' }
      ]
    };
  }
  componentDidMount() {
    Iconfont({
      name: 'iconfont1',
      url: 'https://at.alicdn.com/t/font_1474198576_7440977.ttf'
    });
  }

  renderGridCell = (item) => {
    return (
      <View style={styles.iconCell}>
        <Text style={styles.icon1}>{item.icon}</Text>
        <Text style={styles.iconCellText}>{item.name}</Text>
      </View>
    );
  };
  render() {
    return (
      <Page title="Iconfont">
        <Page.Intro main="自定义你的 iconfont 集合" />
        <MultiRow style={styles.wrap} dataSource={this.state.gridData} rows={4} renderRow={this.renderGridCell} />
      </Page>
    );
  }
};

const styles = {
  wrap: {
    backgroundColor: '#ffffff'
  },
  iconCell: {
    paddingLeft: 40,
    paddingRight: 40,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    marginLeft: -1,
    marginTop: -1,
    height: 220,
    alignItems: 'center',
    justifyContent: 'center'
  },
  icon1: {
    fontFamily: 'iconfont1',
    fontSize: 38,
    marginBottom: 30,
    color: '#3089DC'
  },
  iconCellText: {
    fontSize: 20,
    color: '#999999',
    alignItems: 'center',
    marginBottom: 40
  }
};
render(<App />);
```