Переопределить шрифт Awesome icon whit background image - PullRequest
Новая
       8

Переопределить шрифт Awesome icon whit background image

0 голосов
/ 29 августа 2018

Я пытаюсь переопределить / заменить значок Font Awesome фоновым изображением. У меня есть только CSS-доступ.

Что у меня есть: plus button

.btn.btn-default.bootstrap-touchspin-up:before {
    font-family: Fontawesome;
    content: "\f067";
    font-size: 14px;
}

Чего я пытаюсь достичь: plus-2

.btn.btn-default.bootstrap-touchspin-up:before {
    background-image : url(Images/arrows-left-right.png);
    font-family: initial;
    content: "";
    font-size: 14px;
    height: 20px;
    width: 20px;
}

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Попробуйте это

HTML: 

    <span class="btn btn-default"></span>

CSS: 

.btn:before {
  font-family: Fontawesome;
  content: "\f067";
  font-size: 14px;
}

.btn {
  border-radius: 50%;
  border: 2px solid black;
}

Демо: http://jsfiddle.net/GCu2D/5181/

0 голосов
/ 29 августа 2018 
display:inline-block;

Это все, что тебе нужно. Стандартно: before и: after встроены, поэтому они сворачиваются независимо от высоты и ширины. Inline-блок даст вам то, что вы хотите.

0 голосов
/ 29 августа 2018

Вам нужны эти дополнительные свойства 

  width: 15px;
  height: 15px;
  display: inline-block; 
  background-position: center;
  background-size: contain;

Как уже упоминал @Alexander De Sousa в комментариях, inline-block - это лучший выбор, чтобы держать все в строке.

...