2

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.

enter image description here

4

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>
  • Dipseh, i put the code into default.xml and it removed the link "my account" instead of adding class.. the html code is not there. – Fancyman Nov 11 '16 at 12:42
  • Add this block under this : <referenceBlock name="top.links"> <block> </referenceBlock> – Dipesh Rangani Nov 11 '16 at 13:29
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?

  • don't i need to make a <span class="icon"> </span> first before the link? I go try now.! – Fancyman Nov 10 '16 at 23:30
  • Hi Vlad, so i tried i got the "icon showing up" only when i add a class "to the ahref tag...so i have to be able to add a class tag to the url...so i can put the icon :before so both are "links"... – Fancyman Nov 10 '16 at 23:47
  • You can do something lie this li.authorization-link a:before {css declarations} so you don't need to add a class on the <a> element and you can style depending on <li> – Vlad Patru Nov 11 '16 at 10:56
0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.