w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Centering FontAwesome icons vertically and horizontally
So I finally got it(http://jsfiddle.net/ncapito/eYtU5/): .centerWrapper:before { content:''; height: 100%; display: inline-block; vertical-align: middle; } .center { display:inline-block; vertical-align: middle; } <div class='row'> <div class='login-icon'> <div class='centerWrapper'> <div class='center'> <i class='icon-user'></i></div> </div> </div> <input type="text" placeholder="Email" /> </div>

Categories : CSS

Can I use fontawesome icons without the bootstrap css?
At http://fontawesome.io/get-started/ there's a "Not using Bootstrap?" section how to use it without Bootstrap. And here: http://fontawesome.io/examples/ are examples how to use it. e.g. in a div: <div><i class="icon-camera-retro"></i></div>

Categories : HTML

Adding FontAwesome icons to a D3 graph
I'm truly new to d3, but font awesome works by styling an <i> element with a class attribute. The only way I found is to append a foreignObject and set on it the relevant HTML needed by font awesome. Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?redirectlocale=en-US&redirectslug=SVG%2FElement%2FforeignObject http://fortawesome.github.io/Font-Awesome/examples/ Code: g.append('svg:foreignObject') .attr("width", 100) .attr("height", 100) .append("xhtml:body") .html('<i class="icon-fixed-width icon-user"></i>'); Demo: http://jsbin.com/eFAZABe/3/

Categories : Javascript

Change font-weight of FontAwesome icons?
What robooneus has said is partly incorrect. Font Awesome only provides an image when the IE7 stylesheet is included; and even then the image is only provided to IE7. Font Awesome makes use of the Private Use region of Unicode. For example, this .icon-remove you're using is added in using the ::before pseudo-selector, setting its content to f00d (&#xF00D;): .icon-remove:before { content: "f00d"; } Font Awesome does only come with one font-weight variant, however browsers will render this as they would render any font with only one variant. If you look closely, the normal font-weight isn't as bold as the bold font-weight. Unfortunately a normal font weight isn't what you're after. What you can do however is change its colour to something less dark and reduce its font size to ma

Categories : CSS

FontAwesome icons inside anchors not animating on chrome
Add the rotator class to the anchor instead. It will start rotating on page load, assuming this is what you want? http://jsfiddle.net/7kANu/4/ <a class="rotator"> <i class="icon-wrench"></i> </a> EDIT: Are you not able to wrap the icon in a div and assign the rotator class to that as a workaround?

Categories : HTML

What's the correct markup for stacked fontawesome icons as a bulleted list?
Is this what you are looking for? <ul class="icons-ul"> <li> <span class="icon-stack icon-li"> <i class="icon-check-empty icon-stack-base"></i> <i class="icon-ok"></i> </span> Buttons </li> <li> <span class="icon-stack icon-li"> <i class="icon-check-empty icon-stack-base"></i> <i class="icon-ok"></i> </span> …and many more with custom CSS </li> </ul>

Categories : CSS

HTML + resize horizontally aligned images
Do you want something like this? jsFiddle: http://jsfiddle.net/jplahn/4h9Vy/ Try resizing the width of the parent container (in my jsFiddle). HTML: <div id="parent"> <!-- actual image width is 200px --> <img class="image" src="i.png" > <img class="image" src="i.png" > </div> CSS: .image { display: block; float: left; max-width: 200px; width: 50%; position: relative; } #parent { overflow: hidden; width: 100%; display: block; }

Categories : HTML

How do I make sure my text and textboxes are aligned horizontally?
<style> form {display:table;} label {display:table-row} label span , input {display:table-cell;} </style> <form> <label> <span>Name:</span> <input type="text" name="Name"/> </label> <label> <span>Phone:</span> <input type="text" name="Phone"/> </label> </form> Works for IE8 and newer

Categories : HTML

Icons not aligned properly in JQuery Mobile 1.3.2
I didn't come across this issue, maybe due to CSS Conflict. But I have an idea to solve this issue. Try to inspect the element using Developers Tools(F12) and override it in your own stylesheet. Here is a sample screenshot Hope this helps.

Categories : Javascript

Horizontally aligned divs working in Chrome but not Firefox
Instead of floating the elements to the left, you can use display: inline-block; with white-space: nowrap; Demo #wrapper { display: inline-block; border:2px solid red; white-space:nowrap; overflow:hidden; } #images { height:200px; border:4px solid blue; display: inline-block; overflow:hidden; } #thumbs { height:100px; border:4px solid green; display: inline-block; }

Categories : HTML

How to horizontally aligned inmobi banner view programmingly in Android?
After countless trial and errors, I found the following code works: FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams( FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT); layoutParams.gravity = Gravity.CENTER_HORIZONTAL; inmobiBannerView_.setLayoutParams(layoutParams); FrameLayout layout = (FrameLayout)activity_.findViewById(android.R.id.content); layout.addView(inmobiBannerView_);

Categories : Android

How to properly center two almost identical FontAwesome icons to the center of
Change the size of the icon to an odd number. It's 1px off because the object you're trying to center probably isn't an even number of pixels wide. .btn { width: 49px; min-height: 49px; border-radius: 50%; background: #854eb3; text-align: center; line-height: 49px; font-size: 30px; color: white; }

Categories : HTML

How to ellipsize center-aligned textview beside a right-aligned button when screen width is small
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" > <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wra

Categories : Android

CSS menu left aligned in IE but centre aligned in chrome
I think you are using old version of explorer. So you need to use newer version of explorer called version 10. It looks same in chrome and explorer 10. Just check in explorer 10. It works perfectly in version 10.

Categories : HTML

How to horizontally center image in div while horizontally centering the div on the page?
With an extra wrapper around your current markup you can do this: FIDDLE <div class="container"> <a class ="banner" href="#"> <img src="http://www.hettahuskies.com/images/headers/HHwebsite03.jpg"> </a> </div> CSS .container { text-align:center; width: 100%; } .banner { display:inline-block; } img { display: table-cell; vertical-align: middle; }

Categories : HTML

CSS: ellipsis in left-aligned text of single line of dynamic width text where width of left-aligned text = 100% - right-aligned text
1) Remove float:left from your left div and 2) Add display:block on your left div and bingo! - the right div takes up only as much space as it needs - without giving it a fixed width anymore. UPDATED FIDDLE + FIDDLE 2 (just to prove it works) Markup <div id="wrap"> <div id="right">Right</div> <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div> </div> CSS #wrap { width: 100%; } #left, #right {padding:5px;} #left { background-color:red; text-align:left; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #right { background-color:orange;

Categories : CSS

Hovering on icons with font awesome: how to change the size or edges of the icons?
Check out this jsfiddle: http://jsfiddle.net/fTdRS/ You could try putting the icons into an inner div similar to this example. div.inner { xdisplay: block; width: 280px; height: 80px; display:table-cell; vertical-align:middle; }

Categories : CSS

iOS 7 App Icons, Launch images And Naming Convention While Keeping iOS 6 Icons
Absolutely Asset Catalog is you answer, it removes the need to follow naming conventions when you are adding or updating your app icons. Below are the steps to Migrating an App Icon Set or Launch Image Set From Apple: 1- In the project navigator, select your target. 2- Select the General pane, and scroll to the App Icons section. 3- Specify an image in the App Icon table by clicking the folder icon on the right side of the image row and selecting the image file in the dialog that appears. 4-Migrate the images in the App Icon table to an asset catalog by clicking the Use Asset Catalog button, selecting an asset catalog from the popup menu, and clicking the Migrate button. Alternatively, you can create an empty app icon set by choosing Editor > New App Icon, and add images to the

Categories : IOS

"Android Design Icons" do not match system icons
The icons(and other resources) can be found in android sdk directory on your hard drive. Follow this path: android_sdk_directory / sdk / platforms / android-VERSION / data / res

Categories : Android

FontAwesome: icon-4x no worky
I think your question should be : "How to change the size of a stack of icons". The thing is, if you want to change the size of a stack of icons, you have to add the "icon-4x" class to the stack and not to the icons directly. For example : <span class="icon-stack icon-4x"> <i class="icon-circle-blank icon-stack-base"></i> <i class="icon-laptop"></i> </span>

Categories : HTML

FontAwesome with Grails
Try passing the class name to remoteLink, which creates a link that uses Ajax to call a remote function and you can add your fontAwesome classes to it. <g:remoteLink class="btn icon-ok" action="index" > click (without i tag) </g:remoteLink> or <g:remoteLink action="index" > <i class="btn icon-ok">click (with i tag) </i> </g:remoteLink> Both approaches should work.

Categories : Grails

Is it possible to color the fontawesome icon colors?
All you need is to set color: yellow. Because the icons are a font, they will take whatever colour you'd set to any other font (text) in the same way. if you want to fill the whole star as yellow, try icon-star instead of icon-star-empty you can try this -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: orange; to add stroke (outline) to the font itself. I hope thats what you are looking for. and to fill it just use the normal color: yellow;

Categories : CSS

FontAwesome files not published to the web server
Please check the following. 1) check if the font files are in your project in visual studio (i.e. event the files are in the the project folders in Explorer doesn't mean it is in visual studio project, see if you can view it in your solution explorer) 2) if you can see it in your solution explorer, right click on it and see if you see an option called Include In Project. if you see this, click on it and it will include the file into your project. Instead, if you see Exclude from Project then it's in your project. 3) right click on the font file again and see if the Build Action property is set to Content.

Categories : C#

Is there a way to render a FontAwesome Icon as the background?
You can do this using relative and absolute positions. Here is a rough example to get you started: http://jsfiddle.net/n57uf/1/ <div class="parent"> <i class="icon-star-empty icon-4x child"></i> <p class="content">Lorum ipsum lorum ipsum etc tect</p> <div> .parent { position: relative; border:1px solid black; height: 200px; width: 200px; overflow: hidden; } .child { position: absolute; top: -15px; left: -20px; } .content { padding: 10px; font-size: 16pt; }

Categories : CSS

How can I overlay a number on top of a FontAwesome glyph?
You css should look something like: .contain-i-e-s,.icon-empty-star,.text-i-e-s{ height:100px; width:100px; } .contain-i-e-s{ position:relative; } .text-i-e-s{ text-align:center; position:absolute; } Your HTML might look like: <div class='contain-i-e-s'> <i class='icon-empty-star'></i> <div class='text-i-e-s'>99</div> </div>

Categories : CSS

use FontAwesome icon in svg without external files
Your example is an SVG Font and it doesn't work on IE or Firefox. You need to encode FontAwesome as a data URI and embed as a @font-face if you want it to work everywhere: <svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200"> <defs> <style type="text/css"> @font-face { font-family: 'FontAwesome'; src: url(data:font/opentype;base64,[...]) format('opentype'); } </style> </defs> <rect x="0" y="0" height="100" width="500" fill="#eee" /> <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32"> &#xf007 </text> </svg> Replace the [...] with th

Categories : CSS

How can I add an href to a fontawesome icon and word below it?
Try: <div style="margin-top: 1.2em"> <a href="/home"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> <br /> <span class="normal">Home</span> </a> <a href="/admin"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i> <br /> <span class="normal">Admin</span> </a> <a href="/setting"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i> <br /> <span class="normal">Setting</span> </a> </div> And then in your css, give the .normal class a different font family .normal{ font-fam

Categories : HTML

Why not use otf format in fontawesome to fix chrome bad rendering issue?
Have you tried this? I have a problem with icons getting cut off at the top but loading the otf file doesn't fix it. As chrome can also load svg fonts then the opentype will be downloaded and then overridden with an extra http request for the svg. So it seems like you are downloading extra data and ending up with the same result?

Categories : Google Chrome

I'm using PhoneGap and in my pages I'm trying to use FontAwesome but it doesn't work?
https://github.com/FortAwesome/Font-Awesome/issues/1094 I think this explains it You have to go into the font-awesome css and make a change to the line text-rendering: optimizelegibility; change it to text-rendering: auto;

Categories : Android

How to put a spinning fontawesome icon inside a link?
Your code works, fiddle. But you should have the icons tag <i> outside the anchor tag, otherwise it will be hyper linked. Change your like this <i class="icon-spinner icon-spin"></i> <a href="http://google.com">Google</a> Working Fiddle

Categories : HTML

Eclipse validation error with fontawesome-webfont.svg
This is the validator telling you your file is invalid. The message means that the contents of your font-face element have to match the sequence it relates. It can not be EMPTY. Try letting Eclipse generate a new XML file from the same DTD and you'll see what it needs to look like.

Categories : Eclipse

how to stylize a circle Fontawesome icon background?
It feels a little hacky, but I managed to get it working here: http://jsfiddle.net/3FvxA/ display:block and giving it a height and width seems to be the secret.

Categories : CSS

Paragraph not aligned properly
You should change the style as follows: h4.social { /* remove: padding-left: 50px; */ color: #fff; } h4.copyright, p.copyright { padding-left: 50px; margin: 0px; /* add this line */ color: #FFF; } I recommend using this chrome extension for "playing" with CSS changes

Categories : HTML

How to get two tables aligned next to each other both at the top of the page
It is better to separate your CSS and PHP Script so that it will be clearer to see your CSS properties. Try to append a variable instead of adding echo each time. You wrote "align" instead of "text-align" for your style probably. $string = "<table style='width:100%;'><tr><td>"; $string .= "<div class="my-style"><table>"; $string .= "..."; Then in your CSS file : .my-style { min-height:500px; margin-top: 10px; } .my-style table { -moz-border-radius:15px; border-radius: 15px; border-bottom:1px solid gray; text-align: left; float: left; background- color:white; margin: auto;width: 75%; } UPDATE If you want two tables side by side : .table1 { width:auto; max-width:49%; display:block; float:left; } .table2 { width:auto; max-width:4

Categories : HTML

How to place two divs aligned
FIDDLE It doesn't have margins. Since it is a display:inline-block element, the top spacing comes from it needing to be vertically aligned to the top, and the left spacing comes from the literal space between it and the <div> element before it. Add this: #divR { /* ... */ vertical-align:top; } And remove the space between #divL and #divR.

Categories : CSS

css: right-aligned element is off-screen
There is nothing wrong with your button, its the containing element. Update the css with: .view-header { background-color: #F5F5F5; border-bottom: 1px solid #BBBBBB; margin-bottom: 20px; padding: 10px 20px; } Removing width: 100%; Div's are block line elements, meaning they will fill their parent. This should solve your problem. See: http://jsfiddle.net/99rhF/2/

Categories : CSS

reCAPTCHA box not being aligned correctly
Set appropraite CSS on the form. It's all block elements so text-align:center won't work on it. text-align only works on inline elements. However this will: form { display: inline-block; margin: 0 auto; } Updated fiddle here: http://jsfiddle.net/hw7rX/2/

Categories : HTML

Leaflet - Map is not getting center aligned
Map canvas' position and size should be fixed before map created. Hide/show <div>s first, then create map. Change order of createMap(); and $("#map").show();$("#list").hide();. fiddle: http://jsfiddle.net/e6y5k/

Categories : Jquery

memory not aligned properly?
This is a bit compiler dependent... Isn't the correct thing to write: movaps return_val, xmm0 Why don't you show us the generated code? The way you are writing this is a lot worse than if you let the compiler do it on its own. This function should be inlinable and translate to a single instruction in the best case, if you write it like this it cannot be inlined. This function could receive its arguments in registers in Intel 64 and return its result in a register, if you write it like this you force using the stack. This function could use return value optimization, writing it like this forces you to write xmm0 to the return_val variable which will have to be copied a second time. So... aligned versus unaligned MOVPS is your least concern. Why not just, in portable code, write:

Categories : C++

Android How to put a RelativeLayout aligned to bottom?
<TextView android:id="@+id/overviewScreenLeft" android:layout_alignParentTop="true" This is your problem. You want alignParentBottom="true"

Categories : Android



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.