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
Related
In my Angular5 app , I have a datepicker library which is rendering a datepicker with some buttons
in those buttons , i want to inject some icons.
When inspecting the page ; the html structure would be something like this
<button>
<i class="glyphicon glyphicon-chevron-left"></i>
<button>
but as i'm not allowed to modify the html view , i cannot add this icon directly in the html :
<i class="glyphicon glyphicon-chevron-left"></i>
The solution is to do it with css.
Suggestions?
Glyphicon uses the pseudo classes :before & :after to inject the icons.
Use the :after pseudo class on this element and try adding the code of this specific icon. It should be something like this:
.glyphicon.glyphicon-chevron-left:after{
content:"\e079";
}
The content used in the code will vary. You can double check it in this link in "CSS rule". Also remember that you may want to style it properly to guarantee its visibility.
Best of luck!
By JS you can do this:
var elem = document.getElementsByTagName('button');
elem[0].innerHTML += "<i class='glyphicon glyphicon-chevron-left'></i>";
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.
My website runs on Concrete5.
I wanted to add some more Font Awesome icon to an existing page, but it's not showing. Strange thing is, there already are icons on my webpage and they are showing...
However when I edit the block with the icons in it to check the HTML, there is no HTML/CSS saying the icons should be there!
When I add an icon in the content block in HTML, nothing shows. But when I add an icon with an HTML block it does show.
For instance the tree columns underneath the green picture show three green check boxes.
And this is what the content block says is in the block:
<p>Sessie 1</p>
<p>Analyse van je proces van vliegangst en je omslagpunt</p>
<p>Stoppen van de angst, piekeren en vervelende herinneringen</p>
<p>Praktische oefeningen voor thuis</p>
See the website here
As you can see, there is no font-awesome css in there. But icons are showing on the webpage. The css is also showing when you check the html of the page.
Now, if I would put
<p> <i class="fa fa-camera-retro"></i> test</p>
In the same block (a content block, in the html window). It won't show a camera. It would just show "test".
If I then go back to the content block and see what's in the html, it says
<p>test</p>
Now if I would put the same line of code in an HTML block, it does show the camera icon.
So there are two things happening:
Older font-awesome icons are showing on the webpage but not in the content blocks html.
New font-awesome icons can't be added through html in content blocks, but can in HTML blocks.
Edit: When I use this code:
<p class="fa fa-camera-retro"></p>
It does show in the content block. But then I can't simply add a symbol with some text, because the font will be from the font-awesome font.
the <i> tag still isn't working.
so
<i class="fa fa-camera-retro"></i>
Gives nothing.
The icons only appear when there's text between the code:
<i class="fa fa-camera-retro">foo</i>
However, the editor changes the <i> tag then to an <em> tag. And 'foo' then has the font-awesome font. Not the font of my website.
****SOLUTION****
If I do it like this:
<p><i class="fa fa-camera-retro"> </i> some text</p>
Everything works as I want.
Still, all the older font-awesome css from the website is missing from the content blocks, but it is rendering when I view the website in a browser. If anyone has a suggestion how that can be fixed?
Ahh, I think I see your problem. You entered a new HTMLblock, and just pasted in the fa-camera-retro. FontAwesome works as a class and should be entered within a tag.
You can use the <i> tag for it, but also the <p> tag or whatever you want. It should be then something like
<i class="fa fa-camera-retro"></i> (dont forget the extra fa class to make it appear as a font awesome.
It's also worth remembering for the future that when you use the content block, TINYMCE automatically strips out some HTML tags by default, this includes <i>'s... To prevent TINYMCE from doing this, go to:
Dashboard > System & Settings > BASICS / Rich Text Editor. Once there, select 'Custom' and add the following line
verify_html: false
For more information, it's worth keeping this in your bookmarks when using Concret5, especially the content block: http://www.tinymce.com/wiki.php/Configuration3x:verify_html
I saw this on your page:
It should be <p><i class="fa fa-camera-retro"></i> some text</p>
Result:
So basically what you need to so is just change this
<p>fa-camera-retro</p>
to this
<p><i class="fa fa-camera-retro"></i> some text</p>
The trick to adding FontAwesome icons in C5 Content blocks is using the em tag along with adding code for non-breaking space between them.
<em class="fa fa-camera-retro"> </em>
Check if you have given your icon any sort of margin, I had the same problem where some icons would make when I checked keenly I noticed I had a CSS rule.
p i{
margin-left:10px;
}
when I removed that margin all my icons worked.
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.
I have a complex site that has lots of CSS, including jQuery UI and more.
I have added twitter bootstrap 3 (latest at this time) and I wanted to use it just to style a single link as a button.
Well, I got the button and it is awesome!
But also, somehow my fieldset's <legend> element got a different styling, and my existing menu suddenly started using larger font-sizes, messing up my existing layout.
My impression is therefor that adding twitter bootstrap messes with your existing components, whether you like it or not. I am not sure if it always does this, or if it is a complex interaction between my existing CSS and the bootstrap.
My question: how do I limit bootstrap to styling my single button only (and leave the rest alone)? Is that possible?
My code was:
<link rel="stylesheet" href="bootstrap.css" type="text/css" media="screen" />
.....
<fieldset>
<!-- somehow the legend text below changed from existing pre-bootstrap styling -->
<legend>Menu Selection</legend>
<table>
.....
<a href="#" class="btn btn-default btn-info btn-lg">
<span class="glyphicon glyphicon-cog"></span>
button</a>
Why don't you copy the Button style and include it in custom.css and ignore Bootstrap.css.
I don't think it's a good idea to include a big framework just to style a button/link?
Alternatively, use the Bootstrap customizer to download the parts you 'want' to use.
Also, you can create different versions of the Bootstrap.css file via division.
Here's an image.