# Iconfont 使用 Demo

* order: 0

在 componentDidMount 生命周期加载 Iconfont , 可以使用 iconfont.cn 字库或自定义字库

---

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

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  componentDidMount() {
    Iconfont({
      name: 'iconfont1',
      url: 'https://at.alicdn.com/t/font_1474198576_7440977.ttf'
    });
  }

  
  render() {
    return (
      <Page title="Iconfont">
       <Text style={styles.icon1}>{formatUnicode('e60f')}</Text>
      </Page>
    );
  }
};

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