I have this line of code:
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search Products', 'paralinx' ); ?>" />
How can I add a font awesome icon before the "Search Products" text?
I tried using :before in the input field but it does not work.
Hope you can help
:before
and :after
are only available on elements that can have content
in between an opening and a closing tag. <input type=submit>
cannot have content.
Use
<button type="submit" class="submit" name="submit" id="searchsubmit"><?php esc_attr_e( 'Search Products', 'paralinx' ); ?></button>
instead, it does allow the usage of :before
.
You should use :before pseudo-element with 'content' property:
.submit:before {
content: "";
display: block;
background: url("icon.jpg") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
使用按钮标签
<button type="submit" class="submit" name="submit" id="searchsubmit" ><i class="fa fa-check"></i> <?php esc_attr_e( 'Search Products', 'paralinx' ); ?></button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.