How can I get the Glyphicon to show up on the same row and left to the links, and not over the link as it does now? Whitout the glyphicon becoming a part of the link?
Here is the code:
<span class="glyphicon glyphicon-exclamation-sign"></span>
<a href="http://www.somewebsite.com/" target="_blank">
<h4><b>Some website</b></h4>
</a>
This syntax should get you what you are looking for:
<h4><span class="glyphicon glyphicon-exclamation-sign"></span> Some website</h4>
From the Twitter Bootstrap documentation talking about Glyphicons, it reads there to add a nested span tag and apply the icon classes to the span tag. Here's a link to the Twitter Bootstrap documentation on Glyphicons: Twitter Bootstrap documentation
It would help if you added the css styles already in effect to the question.
But in general, if the glyphicon is covering the link, you could add left margin to the link. The margin part wont be clickable.
Related
I'm doing a form with bootstrap and html, and i'm using glyphicons but for some reason those doesn't work
<label>Colaboración Internacional <span class="glyphicon glyphicon-user" style="font-size:24px;"></span> </label>
But it only appears something like a blank square
Do you import the Glyphicons libray in your page, best way to check is to inspect the span
if you see some :before with content and code, it OK, if not you need to include it in your imports
Fairly new to coding html and css and want to make sure I'm keeping my code clean and closing tags correctly.
I'm working with an html template and trying to correctly create links from my buttons.
The way I've wrapped them in Brackets is working properly on the page and the links are working correctly, but Brackets is showing some red tags meaning I've not wrapped something properly.
Could someone show me where I'm doing this incorrectly, as I'd like to follow good code form moving forwards.
Thanks so much.
Current code for the button below:
<span class="button--inner">Contact Us</span></button>
You need to close your link tag:
<a href="contact_us.html">
<button class="button button-blue button-bordered">
<span class="button--inner">Contact Us</span>
</button>
</a>
BUT I wouldn't wrap a button with a link and instead style the link as a button.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
Contact Us
Also look at this answer as Our_Benefactors stated in the comments: How to create an HTML button that acts like a link?
You are missing a > bracket for the HREF.
<a href="contact_us.html"> <!-- THIS ONE HERE -->
<button class="button -blue -bordered">
<span class="button--inner">
Contact Us
</span>
</button>
</a>
There is a small mistake actually.
You forget > for <a> tag.
Try this.
<a href="contact_us.html">
<button class="button -blue -bordered">
<span class="button--inner">Contact Us</span>
</button>
</a>
I am using this template: https://startbootstrap.com/template-overviews/grayscale/ and am trying to replace the icon, which uses the i tag, with my own logo. I can't seem to find out how to use the i tag with my own image. I tried replacing it with an img tag, but the styling gets messed up. This is the line of html that is causing the issue:
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap
</a>
I don't know what css, if any, to include since there is a lot relating to the specific class. Any help appreciated.
Edit: UncaughtTypeError's comment is the way to go.
That is because the .fa-play-circle CSS class is affecting the "play icon" using the following CSS (found in font-awesome.min.css):
.fa-play-circle:before {
content: "\f144";
}
So, it isn't really an image as much as it is a glyph loaded before the tag.
How to insert glyphicon icon in my website. Now I'm trying to put icon in my website but not fixed
Without a part of your code we can't be really helpfull.
However, to me it looks like you forgot to use the property #font-face.
See the doc:
https://developer.mozilla.org/fr/docs/Web/CSS/#font-face
When using Bootstrap, use a span with the class 'glyphicon' and another class specified for each icon, like so:
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Here you can find all icons Bootstrap is currently offering.
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/