Значок FontAwesome внутри кнопки ввода с использованием: после - PullRequest
Новая
       15

Значок FontAwesome внутри кнопки ввода с использованием: после

0 голосов
/ 27 апреля 2019

Я пытаюсь отобразить значок календаря на кнопке отправки.Примечание: я не могу вставить тег или что-то подобное - я просто хочу отформатировать кнопку из CSS.Пока ничего не видно.

код HTML: 

<p class="mphb_sc_search-submit-button-wrapper">
    <input type="submit" class="button" value="Search">
</p>

Код CSS: 

.mphb_sc_search-submit-button-wrapper {
    display:inline-block;
    position: relative
}

.mphb_sc_search-submit-button-wrapper:after {
    content: '\f274';
    position: absolute;
    right: 6px;
    font-size: 18px;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

`ОБНОВЛЕНИЕ: Я должен изменить цвет на белыйтеперь он показывает:

enter image description here

Я искал что-то вроде этого:

enter image description here

1 Ответ

1 голос
/ 27 апреля 2019

Я думаю, что вы забыли шрифт удивительный файл 

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css 

.mphb_sc_search-submit-button-wrapper {
    display:inline-block;
    position: relative;

}
.mphb_sc_search-submit-button-wrapper input{
  padding-right:30px;
}
.mphb_sc_search-submit-button-wrapper:after {
    content: '\f274';
    position: absolute;
    right: 6px;
    top:3px;
    font-size: 18px;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

https://jsfiddle.net/9jngfrm5/

...