# 一个图标+文字的组件
由[一个图标+文字的组件](../dom/一个图标_文字的组件.md)可以看到,我们手写了外层布局的样式,手动把icon和text添加到了container中.如果用FineUI提供的布局组件改怎么写呢?
通过查阅[FineUI基础教程](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494116)来知悉如何创建一个组件,以及一些基础控件的使用,想象一下,我们要实现的图标+文字组件是怎样组合的:一个水平方向的布局,内部为一个图标和文字.于是我们需要用到`bi.vertical_adapt`布局加 `bi.icon` `bi.label` 两个控件,而图标多数情况下我们是需要水平垂直居中的,因此还需要`bi.center_adapt` 容纳一下.   
## js
```
    // 创建一个图标+文字的组件
    var IconText = BI.inherit(BI.Widget, {

        render: function () {
            return {
                type: "bi.vertical_adapt",  //  首先是垂直居中布局容纳两个子元素
                items: [
                    {
                        type: "bi.center_adapt",  //  水平垂直居中布局
                        cls: "setting-font",  //  图标定义的类名
                        items: [
                            {
                                type: "bi.icon"  //  图标组件,<i>
                            }
                        ],
                        width: 24,
                        height: 24
                    }, {
                        type: "bi.label",  //  label文字标签
                        height: 24,
                        text: "这是一个图标+文字的组件"
                    }
                ]
            };
        }
    });
    BI.shortcut("dec.plugin.icon_text", IconText);
```