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 ⌃.
Related
I'm trying to change the number value on font awesome's fa-money icon to 750 (instead of 1). Longer term I'll be setting it dynamically, but I can rely on 3 characters of space being required.
I think the answer might be stacked icons as noted in this font awesome blog post, but I haven't been able to get the formatting right.
The customization from the blog post above looks like this:
<span class="fa-stack fa-3x">
<i class="fa fa-file-o fa-stack-2x"></i>
<strong class="fa-stack-1x fa-stack-text file-text">16</strong>
</span>
But again, when I try my best hack-job on the fa-money, it looks like a jumbled mess.
Well the '1' on the money-icon isn't editable, it's 'hard-designed' so you can't just change the number on that one. The other examples on the blog post you posted don't have any numbers in them so it's easy to add with the trick you posted.
There is an 'hack' tough. You can add your own icons to fontawesome, so make a icon like the money icon but remove the inner number. Then once added to fontawesome you can set the number with the trick you tried yourself.
Take a look at https://icomoon.io to see how to add icons. Best of luck!
There are two ways to use Materilize Icon:
<i class="mdi-ICON-NAME"></i>
<i class="material-icons">ICON_NAME</i>
In the official site I did not find guide or icon chart for using the font in this way <i class="mdi-ICON-NAME"></i> but there is guide on how to use the icon in this way <i class="material-icons">ICON_NAME</i> here.
So, when official site doesn't have guide on how to use the icon in this way <i class="mdi-ICON-NAME"></i>. Then why is it defined all over the stylesheet (materialize.css).
Also, if I need to call the icon this way <i class="material-icons">ICON_NAME</i> then I need to link one for font file. Eg.<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">. Hence, I feel that 2 fonts will be loaded into the DOM which is not needed, right?
My quesiton is: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>?
I got it answered by Materialize team:
https://github.com/Dogfalo/materialize/issues/1824#issuecomment-125949178
For question: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>
I got answer: The mdi type icons are being phased out for the official google sources, that's why you won't find the old chart in the documentation. A complete list of the new icons can be found in https://www.google.com/design/icons/
For question: Why not just delete all the mdi icons and css defined as new icons are already offered by google, isn't it?
I got answer: Because that would suddenly break all the user implementations, so this way it can be phased out gradually, giving people time to update their icons.
If you really need to check the old implementation, you can go through the commit history from https://github.com/Dogfalo/materialize/blob/master/icons.html and look at a version before the google icons were added.
You can find the full list of icons here https://www.google.com/design/icons/
The naming is mdi-category-iconname.
An example:
<i class="mdi-action-search"></i>
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
Here's another CSS changes only question. [
Demonstrated here
So, I have a background sprite for some styling elements, and want to style textfields with endcaps (TEXTFIELD) and a repeating background. I've lined things up using padding spaces here in the example, which lets me set background-color, but not a background I think. I've been staring at this for too long, and need some advice. Is it possible to line things up the way I want them, without changing the HTML?
<label> Enter Zipcode: </label>
<span class='bg'>
<span class='leftcap'>
<span class='rightcap'>
<input type="text" class="textfield" name="zipCode" />
</span>
</span>
</span>
edit: I'm spitting angry over here, somehow lost my jsfiddle, and gar. My question still stands... the other jsfiddle linked shared a couple similarities, and served as a base, but I ended up changing almost everything by the time I had it set up. Good thing I copied a little over here.
edit2: here is a partial remade jsfiddle. http://jsfiddle.net/dreamling/P3Jev/3/
I changed outer2 to display:inline-block, that fixes it.
The strange gaps are there because inline-block elements are whitespace dependend (and a whitespace is exactly 4px at standard font-size)
Fix: add letter-spacing:-4px + line-height: 1px.
See http://jsfiddle.net/L8TyD/6/
EDIT: i removed the fixed width, and added hack to make it work in ie7
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"?