以下是一个简单的示例，展示了如何在按钮上添加响应式文本和图标：

HTML代码：

  
    
  
  Home

CSS代码：

.responsive-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
}

.button-icon {
  margin-right: 5px;
}

.button-text {
  display: none;
}

@media only screen and (min-width: 768px) {
  .responsive-button {
    padding: 10px 15px;
  }
  
  .button-icon {
    margin-right: 10px;
  }
  
  .button-text {
    display: inline;
  }
}

在上面的示例中，我们使用了Font Awesome图标库中的一个图标（fa-home）。使用这个图标库需要在HTML的标签中引入相关的CSS文件。

在CSS中，我们首先定义了.responsive-button类来设置按钮的样式。通过display: flex，我们可以将图标和文本元素水平排列。使用justify-content: center和align-items: center可以将它们居中显示。

.button-icon类用于设置图标元素的样式，.button-text类用于设置文本元素的样式。在默认情况下，我们将文本元素的display设置为none，以隐藏它。

通过使用媒体查询，我们可以在屏幕宽度达到768像素时改变按钮的样式。在这种情况下，我们增加了按钮的水平内边距和图标与文本之间的间距，同时将文本元素的display设置为inline，以显示文本。

请注意，这只是一个简单的示例，并且可能需要根据你的具体需求进行进一步的调整。