Thanks to @tuanphan and @DPruitt I achieved the Search Icon result I wanted in Desktop and Mobile following these instructions and using the code below. Thanks guys.
www.khuramanarmstrong.com
Font Awesome search icon within the DIV Social Icon Wrapper of the header
1. First enable your social links in your header.
2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search
3. Add your Font Awesome Script to your Header Injection.
4. Include this Javascript within the Header to make the first link open in the same window:
Code Injection > Header
<script src="https://kit.fontawesome.com/[yourID].js" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.header-actions-action--social a:first-child[target="_blank"]').prop("target", "_self");
$('.header-menu-actions-action--social a:first-child[target="_blank"]').prop("target", "_self");
});
</script>
CSS
/*Custom Search Bar*/
.header-actions--right .header-actions-action--social .icon:first-child
{visibility:hidden}
.header-actions--right .header-actions-action--social .icon:first-child:after {
content: '\f002';
font-family: FontAwesome;
position: absolute;
margin-left:-1vw;
margin-top: 3px;
font-size: 15px;
color:#5F5F5F;
visibility:visible}
.sqs-svg-icon--list a:first-child
{display:none}
/*Mobile*/
.header-menu-actions-action.header-menu-actions-action--social:first-child {
visibility: hidden;
position: relative;
margin: 0 !important;
}
.header-menu-actions-action.header-menu-actions-action--social:first-child a:after {
content: '\f002';
font-family: FontAwesome;
display: block;
position: absolute;
bottom: -2px;
right: 4px;
font-size: 22px;
color: #5F5F5F;
visibility: visible;
z-index: 10000;
padding: 5px;
}
/*END Custom Search Bar*/
hellostudiojohn reacted to a post in a topic:
Does Version 7.1 support a Search Bar/Icon for the site's header?
Beyondspace reacted to a post in a topic:
Developer Help Wanted
