Magento – How to edit search icon on search form

designmagento2

In responsive mode, I can inspect element to see class and values of the search icon.

However in "desktop" mode, when inspecting element I haven't found the corresponding class to edit the search icon.

I know magento 2 uses font icons. I don't want to replace the icon. I just want to edit the color and size.

I created a custom theme which inherits from the Blank magento theme.

Best Answer

Just add the below css:

.block-search .action.search:before {
    font-size: 20px;
    color: red;
}

I find the icon seems to dim for me however not quite sure why yet.

Related Solutions

Magento 2 Menu Issue – Active Mobile Menu Width Calculation Problem

I also came across this issue.

I opted to overwrite the _navigation.less file in the ./web/css/source/ directory of my theme. Do this by copying and paste the corresponding file from the Blank theme.

Search for the following selector:

.nav-sections {
        .lib-css(transition, left .3s, 1);
        height: 100%;
        left: -80%;
        left: calc(~"-1 * (100% - @{active-nav-indent})");
        overflow: auto;
        position: fixed;
        top: 0;
        width: 80%;
        width: calc(~"100% - @{active-nav-indent}");

        .switcher {
            border-top: 1px solid @color-gray82; ...

Within the "left" & "width" properties, I replaced the value 100% with 100vw. You'd think they'd be the same value since 100% should be 100% of the viewport, but it seemed to address the issue. Not sure why.

The resulting selector should like like this, note the replaced 100% values:

.nav-sections {
        .lib-css(transition, left .3s, 1);
        height: 100%;
        left: -80%;
        left: calc(~"-1 * (100vw - @{active-nav-indent})");
        overflow: auto;
        position: fixed;
        top: 0;
        width: 80%;
        width: calc(~"100vw - @{active-nav-indent}");

Let me know if this works for you. Maybe someone can explain the behavioral difference between 100% and 100vw here. To me it shouldn't make a difference.

How to Add a Custom Footer to Magento 2 Theme

In default.xml from module Magento\Theme add this code inside footer referenceContainer

<block class="Magento\Cms\Block\Block" name="block-footer" after="footer_links">
      <arguments>
            <argument name="block_id" xsi:type="string">block_footer_custom</argument>
      </arguments>
</block>

Goto backend Content > Blocks > Add new static block with identifier name block_footer_custom with any html code you need. It so easy to editable Clear cache and re-deploy static. Now you will get your custom block

====UPDATE====
Call block inside template

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_footer_custom')->toHtml();?>

Best Answer

Related Solutions

Magento 2 Menu Issue – Active Mobile Menu Width Calculation Problem

How to Add a Custom Footer to Magento 2 Theme

Related Topic