Как создать ярлык с близким значком в Bootstrap?

Ответ 1

Я закончил с http://jsfiddle.net/7zkCU/30/ (адаптирован из http://maxwells.github.io/bootstrap-tags.html):

<span class="tag label label-info">
  <span>Example Tag</span>
  <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> 
</span>

CSS

.tag {
  font-size: 14px;
  padding: .3em .4em .4em;
  margin: 0 .1em;
}
.tag a {
  color: #bbb;
  cursor: pointer;
  opacity: 0.6;
}
.tag a:hover {
  opacity: 1.0
}
.tag .remove {
  vertical-align: bottom;
  top: 0;
}
.tag a {
  margin: 0 0 0 .3em;
}
.tag a .glyphicon-white {
  color: #fff;
  margin-bottom: 2px;
}

Ответ 2

Бутстрап-глификон (компонент) - это то, что вы ищете: http://getbootstrap.com/components/#glyphicons

Они предназначены для работы с широким спектром других элементов и просты в использовании. Это пример из документов:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Также может быть метка, абзац или аналогичный.

Ответ 3

@user3364825 - Спасибо, что опубликовали ваше решение! Это простое и элегантное решение для отображения тегов поискового фильтра.

Я немного изменил CSS, так что теги немного более отзывчивы. Измененный CSS обращается к двум проблемам:

• Теперь теги будут переноситься и складываться вертикально для меньших видовых экранов.
• Теги ранее распространялись бы за пределы родительского контейнера, если тег был шире родительского контейнера. Метки будут уменьшаться, если они слишком широкие и отображают эллипсис (...) в конце заголовка, когда тег слишком длинный.

Вот модифицированный CSS:

.tag {
  font-size: 12px;
  padding: 0.3em 0.4em 0.3em;
  margin: 2px 1px !important;
  display: inline-block;
  max-width: 100%;
}

.tag > span {
  display: inline-block;
  max-width: 94%;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.tag a {
  display: inline-block;
  color: #bbb;
  cursor: pointer;
  opacity: 0.6;
  margin: 0 0 0 0.3em;
}

.tag a:hover {
  opacity: 1.0;
}

.tag a .glyphicon-white {
  color: #fff;
  margin-bottom: 2px;
}

.tag .remove {
  vertical-align: bottom;
  top: 0;
}