如何在 material 图标和描述之间创建一些白色 space？

Question

我这里有这个设计：

您可以看到 material 图标与描述有点太接近了。我想我可以通过做这样的事情在两者之间创建一些填充：

.location-secondary-info span:first-child {
  padding-right: 5px;
}

那是无效的。

这是组件代码：

renderLocation() {
    const filteredLocations = this.props.locations.filter(location => {
      return !location.name.match(/[A-Z0-9]+$/);
    });

    return filteredLocations.map(location => {
      if (location.airport_code) {
        return (
          <div key={location.id}>
            <div className="location">
              <h1>
                {location.name} ({location.airport_code})
              </h1>
              <div className="location-secondary-info">
                <span>
                  <i className="material-icons">airplanemode_active</i>
                  {location.description}
                </span>
              </div>
            </div>
          </div>
        );
      } else {
        return (
          <div key={location.id}>
            <div className="location">
              <h1>{location.name}</h1>
              <div className="location-secondary-info">
                <span>
                  <i className="material-icons">location_city</i>
                  {location.description}
                </span>
              </div>
            </div>
          </div>
        );
      }
    });
  }

Answer 1

您应该 select 范围内的 i 元素，因此：

.location-secondary-info span i {
  padding-right: 5px;
}

使用 span:first-child，您 select 正在 .location-secondary.

中的第一个 span 元素

如何在 material 图标和描述之间创建一些白色 space？

How to create some white space between material icon and description?

css

sass

reactjs

google-material-icons