Вставка шрифта потрясающий значок с помощью JavaScript - PullRequest
Новая
       10

Вставка шрифта потрясающий значок с помощью JavaScript

1 голос
/ 02 марта 2020

Я работаю над сайтом WordPress, используя плагин приложения Job. Я хочу добавить значок шрифта к кнопке, используя javascript. Код hml, который я вижу для кнопки: 

<input type = "button" class="application_button button" value="apply for job"></input>

, который, я думаю, мне нужно сделать следующим образом, чтобы иконка отобразилась. 

<input type = "button" class="application_button button" value="apply for job"> <i class = "fas fa-chevron-right"></i></input>

JavaScript У меня есть добавлено для достижения этого, 

 var d1 = document.querySelector('.application_button');
d1.insertAdjacentHTML('beforeend', '<i class="fas fa-chevron-right"></i>');

Когда я console.log (d1); Я вижу, что у меня есть код, который я хочу. Но значок не показывает. Если я использую «afterend», то вижу значок, но за пределами кнопки.

Я выгляжу так близко, но так далеко.

Любой совет?

Ответы [ 2 ]

0 голосов
/ 02 марта 2020

Как я уже говорил в комментариях:

INPUT - это пустой элемент (например, <br> et c ...). Закрытие с помощью </input> означает недопустимая разметка .

Поэтому используйте элемент BUTTON 

 <button type="button">Apply for job <i class="fas fa-chevron-right"></i></button>

 <button type="button"><i class="fas fa-chevron-left"></i> Go back</button>

Использование значка внутри значения INPUT

JavaScript решение

Если вы действительно не можете изменить разметку с <input> на <button>, чем вы можете определить font-family с помощью требуемые откаты прямо в CSS и объединить текущее значение ВХОДА в представление в юникоде значка Font Awesome el.value += " \uf054":

Пример с использованием Google шрифтов и Font Awesome : 

const addChevron = el => el.value += " \uf054";
document.querySelectorAll('input.button').forEach(addChevron);
.button {
  font-family: 'Montserrat', 'Font Awesome 5 Free', sans-serif;
  font-weight: 900; /* Needed for font awesome to work... */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

<input class="button" type="button" value="Submit to win!">

Если вы используете какой-либо шрифт Google или хотите наследовать шрифт, не беспокойтесь, выберите один: 

font-family: 'Some Google Font', 'Font Awesome 5 Free', sans-serif;
font-family: inherit, 'Font Awesome 5 Free', sans-serif;
font-family: 'Font Awesome 5 Free', sans-serif;

вы поняли.

HTML решение

Если вы не хотите использовать JavaScript, вы можете использовать представление в юникоде прямо внутри атрибута value : &#xf054;

.button {
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900; /* Needed for font awesome to work... */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>

<input class="button" type="button" value="Submit to win! &#xf054;">
0 голосов
/ 02 марта 2020

Font awesome значки полагаются на создание своих значков на псевдоэлементе ::before, который создает значок с помощью свойства content этого псевдоэлемента.

input теги не могут иметь content, таким образом используя шрифты на них не работают.

Вместо 

<input type="button" class="application_button button" value="apply for job"></input>

, который, между прочим, недействителен HTML, поскольку input не может иметь закрывающий тег </input> по той же причине ::before не работает на нем, используйте 

<button type="button" class="application_button button">apply for job</button>

Поскольку вам нужен значок с правой стороны кнопки, вы можете сделать это либо добавив элемент на конец, который несет CSS классов fas fa-chevron-right: 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<button type="button" class="application_button button">apply for job <i class="fas fa-chevron-right"></i></button>

или путем добавления этого простого CSS: 

.application_button.button.fas.fa-chevron-right::before { float: right; margin-left: 5px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<button type="button" class="application_button button fas fa-chevron-right"> apply for job</button>

Какой метод вы используете, я лично предпочитаю решать проблемы, связанные с компоновкой, с помощью CSS вместо применения ненужной дополнительной разметки.

...