How to highlight the prepend Font Awesome icon in Bootstrap 4 or Bootstrap-vue
1
I am having something like this:
How do I expand the width that the border it will also cover the icon on the left like this:
My HTML:
.input-group-text
width: 48px;
border-right: none;
background-color: #ffffff;
[class^="fa-"], [class*=" fa-"]
display: inline-block;
width: 100%;
.LoginInput
border-left: none;
position: relative;
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" placeholder="Username">
</b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
</b-form-input>
</b-input-group>html css bootstrap-4 bootstrap-vue
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
add a comment |
1
I am having something like this:
How do I expand the width that the border it will also cover the icon on the left like this:
My HTML:
.input-group-text
width: 48px;
border-right: none;
background-color: #ffffff;
[class^="fa-"], [class*=" fa-"]
display: inline-block;
width: 100%;
.LoginInput
border-left: none;
position: relative;
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" placeholder="Username">
</b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
</b-form-input>
</b-input-group>html css bootstrap-4 bootstrap-vue
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
Have you tried something like this?
– Sammii
Nov 11 '18 at 0:27
I tried the padding left but it doesn't work, it moves the text area to the right and add the padding
– quanpham0805
Nov 11 '18 at 0:38
add a comment |
1
1
1
I am having something like this:
How do I expand the width that the border it will also cover the icon on the left like this:
My HTML:
.input-group-text
width: 48px;
border-right: none;
background-color: #ffffff;
[class^="fa-"], [class*=" fa-"]
display: inline-block;
width: 100%;
.LoginInput
border-left: none;
position: relative;
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" placeholder="Username">
</b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
</b-form-input>
</b-input-group>html css bootstrap-4 bootstrap-vue
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
I am having something like this:
How do I expand the width that the border it will also cover the icon on the left like this:
My HTML:
.input-group-text
width: 48px;
border-right: none;
background-color: #ffffff;
[class^="fa-"], [class*=" fa-"]
display: inline-block;
width: 100%;
.LoginInput
border-left: none;
position: relative;
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" placeholder="Username">
</b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
</b-form-input>
</b-input-group>.input-group-text
width: 48px;
border-right: none;
background-color: #ffffff;
[class^="fa-"], [class*=" fa-"]
display: inline-block;
width: 100%;
.LoginInput
border-left: none;
position: relative;
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" placeholder="Username">
</b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
</b-form-input>
</b-input-group>.input-group-text
width: 48px;
border-right: none;
background-color: #ffffff;
[class^="fa-"], [class*=" fa-"]
display: inline-block;
width: 100%;
.LoginInput
border-left: none;
position: relative;
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" placeholder="Username">
</b-form-input>
</b-input-group>
<b-input-group>
<b-input-group-prepend>
<span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
</b-input-group-prepend>
<b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
</b-form-input>
</b-input-group>html css bootstrap-4 bootstrap-vue
html css bootstrap-4 bootstrap-vue
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
edited Nov 11 '18 at 0:55
a stone arachnid
6331620
6331620
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
asked Nov 10 '18 at 23:57
quanpham0805quanpham0805
499
499
Have you tried something like this?
– Sammii
Nov 11 '18 at 0:27
I tried the padding left but it doesn't work, it moves the text area to the right and add the padding
– quanpham0805
Nov 11 '18 at 0:38
add a comment |
Have you tried something like this?
– Sammii
Nov 11 '18 at 0:27
I tried the padding left but it doesn't work, it moves the text area to the right and add the padding
– quanpham0805
Nov 11 '18 at 0:38
Have you tried something like this?
– Sammii
Nov 11 '18 at 0:27
Have you tried something like this?
– Sammii
Nov 11 '18 at 0:27
I tried the padding left but it doesn't work, it moves the text area to the right and add the padding
– quanpham0805
Nov 11 '18 at 0:38
I tried the padding left but it doesn't work, it moves the text area to the right and add the padding
– quanpham0805
Nov 11 '18 at 0:38
add a comment |
1 Answer
1
active
oldest
votes
0
I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.
HTML
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font- awesome.min.css");
body margin: 30px;
.search
position: relative;
color: #aaa;
font-size: 16px;
.search input
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
.search input text-indent: 32px;
.search .fa-search
position: absolute;
top: 10px;
left: 10px;
Find the full thread here.
I hope this is of some help.
answered Nov 11 '18 at 0:29
SammiiSammii
165
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
1
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244599%2fhow-to-highlight-the-prepend-font-awesome-icon-in-bootstrap-4-or-bootstrap-vue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.
HTML
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font- awesome.min.css");
body margin: 30px;
.search
position: relative;
color: #aaa;
font-size: 16px;
.search input
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
.search input text-indent: 32px;
.search .fa-search
position: absolute;
top: 10px;
left: 10px;
Find the full thread here.
I hope this is of some help.
answered Nov 11 '18 at 0:29
SammiiSammii
165
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
1
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
add a comment |
0
I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.
HTML
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font- awesome.min.css");
body margin: 30px;
.search
position: relative;
color: #aaa;
font-size: 16px;
.search input
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
.search input text-indent: 32px;
.search .fa-search
position: absolute;
top: 10px;
left: 10px;
Find the full thread here.
I hope this is of some help.
answered Nov 11 '18 at 0:29
SammiiSammii
165
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
1
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
add a comment |
0
0
0
I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.
HTML
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font- awesome.min.css");
body margin: 30px;
.search
position: relative;
color: #aaa;
font-size: 16px;
.search input
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
.search input text-indent: 32px;
.search .fa-search
position: absolute;
top: 10px;
left: 10px;
Find the full thread here.
I hope this is of some help.
answered Nov 11 '18 at 0:29
SammiiSammii
165
I found this working demo by James Barnett. He uses font awesome icons with css to implement position: absolute; on the icon and text indent to implement what you are trying to achieve. He places the icon and the input field inside a container div.
HTML
<div class="search">
<span class="fa fa-search"></span>
<input placeholder="Search term">
</div>
CSS
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font- awesome.min.css");
body margin: 30px;
.search
position: relative;
color: #aaa;
font-size: 16px;
.search input
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
.search input text-indent: 32px;
.search .fa-search
position: absolute;
top: 10px;
left: 10px;
Find the full thread here.
I hope this is of some help.
answered Nov 11 '18 at 0:29
SammiiSammii
165
edited Nov 11 '18 at 1:59
answered Nov 11 '18 at 0:29
SammiiSammii
165
answered Nov 11 '18 at 0:29
SammiiSammii
165
answered Nov 11 '18 at 0:29
SammiiSammii
165
165
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
1
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
add a comment |
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
1
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
I could position the icon easily, but when in focus mode the icon just disapear.
– quanpham0805
Nov 11 '18 at 2:17
1
1
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
My suggestion would be to follow the code as per the example without focus, as that does everything you want it to and can be adapted to use the icons you want
– Sammii
Nov 11 '18 at 9:16
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244599%2fhow-to-highlight-the-prepend-font-awesome-icon-in-bootstrap-4-or-bootstrap-vue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried something like this?
– Sammii
Nov 11 '18 at 0:27
I tried the padding left but it doesn't work, it moves the text area to the right and add the padding
– quanpham0805
Nov 11 '18 at 0:38