Иконка для ссылки

[alex_web64]

https://jsfiddle.net/q2Lfaew5/2/

Пытаюсь добавить иконку к ссылке. Казалось бы, довольно простая задача, но есть несколько условностей, из-за которых пока ничего не получается.

1) Текст должен быть inline-элементом. Для того, чтобы к каждой строке применялась граница, и пустота в них была не кликабельной (как в первом примере).

2) Иконка всегда должна быть вертикально отцентрированная.

Реально ли это сделать?

[Switch74]

суть не понятна. Как вам нужно в разных случаях?
всегда ли будет одна строка, если нет иконка должна быть выровнена в строке или относительно нескольких строк, нужно ли чтобы иконка подчеркивалась?

https://jsfiddle.net/7tp6fe0m/

[alex_web64]

Все три примера с моей ссылки - это попытки добиться одного нужного результата. В первом блоке у меня отображено желаемое поведение ссылки (бордер у каждой строки, пустота во второй строке не кликабельная). Во втором блоке работает вертикальное выравнивание иконки, но бордер уже применился к блоку.

Строк неограниченное количество, иконка должна выравниватся отностельно всех строк, а не первой, не подчеркиватся, но тот уже как получится.

Вот внешне и по поведению идеальный результат https://jsfiddle.net/vde4u218/, но пришлось добавить два тега ссылки, чего хотелось бы избежать.

[Switch74]

так https://jsfiddle.net/dh0capx4/ ?

[alex_web64]

В фф иконка не по центру.

[Switch74]

попробуйте так https://jsfiddle.net/5xpurek0/

[alex_web64]

Супер. Спасибо!