Solved

Bootstap Icons

Posted on 2016-11-23
3
44 Views
Last Modified: 2016-11-25
I have a Bootstrap form that is using glyphicons.  I need to replace one of them with a custom icon.

First, I need to know how to swap out one of the out of the box bootstrap icons with my own and once I know how to do that I need to find an ICON generator or method to build my own that will look like text in a button.  One such button needs to say "Go".

Here is a code fragment where I want to make this change:
<div id="advancedInitial" style="display:none">
      <div class="container-fluid">
        <label for="person">Who Do You like?</label>
        <div class="input-group">
          <input type="text" id="txtSearchSelectedPeopleInitial" class="form-control" name="field1"/>
          <div class="input-group-addon"><a href="#" onClick="SearchRequest(); return false;" class="glyphicon glyphicon-search"></a></div>
        </div>
      </div>
</div>

Open in new window

0
Comment
Question by:Howard Bash
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41899372
what about : https://jsfiddle.net/do5ftjna/2/
you don't really need the span around the GO...

<div id="advancedInitial">
      <div class="container-fluid">
        <label for="person">Who Do You like?</label>
        <div class="input-group">
          <input type="text" id="txtSearchSelectedPeopleInitial" class="form-control" name="field1"/>
          <div class="input-group-addon"><a href="#" onClick="SearchRequest(); return false;" class=""><span>GO</span></a></div>
        </div>
      </div>
</div>

Open in new window


about gliphicone-search, look inside this file, line 309 : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css

.glyphicon-search:before {
  content: "\e003";
}

Open in new window

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41899453
What about icomoon and/or creating your own SVG file?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41899893
i don't kno iconmoon. If it allow you creatz your own fonts it's all good. After that you just need to use your on class which use your custom fonts
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now