maxfox

Есть онлайн-генераторы (например, этот) или FontForge. Там все интуитивно понятно.
Только не надо делать type=text, это не безопасно, используйте type=password, просто укажите для него шрифт, в котором заменены нужные символы (не только звездочка, в разных браузерах по-разному). И если что-то пойдет не так - будут стандартные для браузера звездочки/кружочки.
Любые варианты с JS - однозначно нет. Вообще, разработчков, модифицирующих содержимое инпутов на лету - гнать ссаными тряпками из профессии. Инпут должен работать только read-only.

.circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid #000;
}

.low-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid red;
  margin: 5px;
}

Обратите внимание, что размер внутреннего круга изменен, везде должны получаться целые числа, иначе при округлении все сместится на 1px.
Т.е. должно быть a + 2*border + 2*margin = b, где a - размер внутреннего круга, а b - внешнего.

По существу обновленного вопроса:
Если вы делаете это в шаблонизаторе, то в цикле, выводя посты, обращайтесь к списку с лайками данного юзера и проверяйте. Условным оператором выставляйте нужный класс элементу.
Если вы работаете через AJAX, то получайте JSON, проходите по нему циклом и расставляйте нужные классы элементам JS'ом.

ЗЫ Рекомендую AJAX, по крайней мере в будущем. Это позволит закешировать страницы и не пересчитывать их при каждом запросе.

ЗЗЫ Не знаю, что у вас там в БД, но очень надеюсь, что вы храните суммарное значение лайков/дизлайков в таблице с ответами, а не считаете его каждый раз заново..