Magento 2.2 how to change header link create an account text to icon

Question

I want to change create an account text to icon.

I can find the layout file under

var\www\html\vendor\magento\module-customer\view\frontend\layout\default.xml

 <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Create an Account</argument>
        </arguments>
</block>

How to change create an account text to icon

Answer 1

The HTML of register link is generated from block RegisterLink.php so you need to override block and add new css class in function _toHtml()

vendor/magento/module-customer/Block/Account/RegisterLink.php

protected function _toHtml()
{
    if (!$this->_registration->isAllowed()
        || $this->httpContext->getValue(Context::CONTEXT_AUTH)
    ) {
        return '';
    }

    return '<li class="register-link"><a ' . $this->getLinkAttributes() . ' ></a></li>';
}

Now add new class in css file

li.register-link:before {
    font-size: 22px;
    content: '\e611';
    font-family: 'luma-icons';
}

Answer 2

You can use in this way, define template to your block template="your/template/pathhere.html" and replace your/template/pathhere.html with template file path:

<block class="Magento\Customer\Block\Account\RegisterLink" template="your/template/pathhere.html" name="register-link" >
    <arguments>
        <argument name="label" xsi:type="string" translate="true">Create an Account</argument>
    </arguments>
</block>

And inside your template you can use icon/image to display icon/image and can call getHref to get link url that you can use to link that icon. Also you can call $block->escapeHtml($block->getLabel()) to get label in your template.