Как вставлять картинки (значки) с помощью шрифта (текстом)? То есть не через img, а именно как символ...

Чтобы вставлять иконки через шрифт нужно, чтобы символами шрифта были эти самые иконки. То есть, нужно иметь шрифт у которого "вместо букв" значки.

Есть готовое решение - шрифт FontAwesome. Этот шрифт содержит большой набор иконок, которых обычно достаточно. Вывод иконок происходит через тег <i> имеющий CSS класс, который задает иконку.

Если же вам хочется вставлять свои уникальные иконки - то придется создать собственный шрифт.

Чтобы использовать FontAwesome нужно:

1. подключить шрифт одним из способов к странице своего сайта, например, через внешний файл стилей:
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQvYUhtdYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
2. использовать конструкцию вида: <i class="fas fa-adjust"></i> в том месте, где нужно вывести иконку. Класс fas fas-adjust указывает на конкретную картинку. Список классов доступен на официальном сайте FontAwesome.