G'day helpers!
I am struggling with following problem:
<i class="icon-pencil"></i> edit
and
<i class="icon-pencil"></i> edit
appear in the complete same format. Both are in the large-button-style. But my first button should appears as a smaller button (not the same size as the large button). Has anyone an idea why that's happen? When I try with -tags the problem appears too. I could not find an appropriate solution in the internet so far.
I hope anyone can help me.
Thanks in advanced.
Cheers
It was the case of bootstrap.css being overridden by our own site.css as it turns out. Had to copy .btn-sm... from bootstrap.css to our customised site.css and it started working like a charm.
btn-mini and btn-large work totally fine for me. Please see the other html or css to check whether the problem is because of some other elements. sample fiddle
Related
I'm trying to add the styles sheet for font-awesome into a Codepen but seem to be getting nowhere, can anybody help please.
Codepen (https://codepen.io/kellett/pen/YreKaW)
Below is the styles sheet I've inserted in the top of HTML page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
It's working, you just are using the wrong font-awesome class.
Line 19 should be <span class="fa fa-search"></span>.
See this updated CodePen
Note: You can also add CDNs in the CodePen settings so you don't have to include it inline in your html.
simply add this http://static.fontawesome.com/css/fontawesome-app.css in css setting panel:
you are using wrong . Check this
<span class="fa fa-search"></span> use like this instead of <span class="fa-search"></span>.
Go to Settings on the top right-hand corner. Then paste the CDN code in the box that says "Stuff for <head>." Press Save and Close before adding your Font Awesome tags, which should be formatted like this:
<i class="fa fa-thumbs-up"></i>
Here's the CodePen. You should see a thumbs up icon on the bottom of the page:
https://codepen.io/calumchilds/pen/boLwVb
Hope this helps!
Add this link into js setting:
https://use.fontawesome.com/4d74086fc6.js.
Open settings.
On the Pen Settings modal, select the CSS tab
In the "Add External Stylesheets/Pens" section, search for font-awesome.
I have one of the most strangest problems that I have faced till today. I am trying to show up and down arrow in unicode in HTML. However, they are not same in size and color.
This is a small issue yet very irritating and stressful to me
<div>˄</div>
<div>⌄</div>
I will be really grateful if somebody could help me. I've already wasted 5 hours behind this.
You're not using the correct pair of arrows. Use ˅ entity for the corresponding down arrow.
See updated fiddle
<div>˄</div>
<div>˅</div>
If you're interested in filled arrows
Demo
<div>▲</div>
<div>▼</div>
Well they are different. Its not a font size issue.
http://graphemica.com/%CB%84
http://graphemica.com/%E2%8C%84
You should use bootstraps glyphicons
http://jsfiddle.net/c9gp9a1w/
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
bootstrap
http://getbootstrap.com/components/#glyphicons
They are not the matching pair.
˄ matches with ˅.
While ⌄ matches with ⌃.
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
I have built a CSS Sprite Navigation. The Navigation functions fine unless you have the UL list in a differnt order than the style sheet, or don't use all of the li elements.
You can see the examples here:
http://www.reneebuller.com/_temp/navigation.html (works)
http://www.reneebuller.com/_temp/navigation1.html (nav2 and nav3 are switched)
(Then go to nagvigation2.html nav 2 is deleted... sory I can't post another link because I'm a newbie and limited to two)
You will see in the later two examples that something happened with text. I can't figure out what is goin on.
You need to change the name of the IDs as well. This is bugged:
<li id="navThree"><a class="" href="#">Two</a></li>
This will work just fine even if inverted:
<li id="navThree"><a class="" href="#">Three</a></li>
<li id="navTwo"><a class="" href="#">Two</a></li>
You don't have any of the CSS in the second example that was used in the first.
Hi i have seen you have made totally image based navigation i think you can easily make this navigation through pure css and than you can make changes easily in css navigation.
please check i have made pure css based navigation similar like your navigation i hope this will help you:- http://jsfiddle.net/YRjE8/10/
i need a three columns form, in the past using tables was easy but now using divs i dont know from where to start... im googling but the css i found doesnt work for me, any help or link will be appreciated
a sample row which shows one of the ways u can do this.
<div>
<span style="width:33%;display:inline-block"></span>
<span style="width:33%;display:inline-block"></span>
<span style="width:33%;display:inline-block"></span>
</div>
here's some other links which might help http://snook.ca/archives/html_and_css/getting_your_di
Look into floating divs.
Have you tried googling something like "css column layout"?