Magento 2 : How can i add Icons to the user links such as “My account” Login" Sign in etc

Question

Further in Magento 1, I could just edit the html template file and do anything I could imagine. Now with this complicated with xml thing, extending templates etc. I'm confused.

What I' trying to do is the following :
Text under Icon on top.

I don't know where I can add that span tag before the text, so I can style them in CSS?

I looked into all files can't find it.

Below is an example of what I want to do.

Answer 1

You have to pass an arguments in default.xml for add class in account link:

<block class="Magento\Customer\Block\Account\Link" name="my-account-link">
 <arguments>
       <argument name="label" xsi:type="string" translate="true">My Account</argument>
       <argument name="class" xsi:type="string" translate="true">account-link</argument>
  </arguments>
</block>

Answer 2

I would recommend using icomoon or fontawesome and include the icons on a "before" element for each link with less/css targeting the class.

Does this help or you need an example?

Answer 3

You have to pass an arguments in default.xml for add class in account link:

<block class="Magento\Customer\Block\Account\Link" name="my-account-link">
  <arguments>
   <argument name="label" xsi:type="string" translate="true">My Account</argument>
   <argument name="class" xsi:type="string" translate="true">account-link</argument>
  </arguments>
</block>

Use font awesome css

.account-link {
  display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
}
.account-link:before {
  content: "\f007";
  padding-right: 5px;
}