I'm designing mockups in Sketch, and I'm using the home and search icons from a UI Font designed for icons. Now I want to display these icons in my angular app using html and css. There doesn't seem to be any resource online that teaches how to do this. I have used resources such as FontAwesome before which have very clear documentation on how this is done.
I got it to work by copying the CSS attributes of the icon inside of sketch by right clicking:
/* home: */
font-family: UIFont-Solid;
font-size: 30px;
color: #FFFFFF;
So add this to your css:
.icon {font-family: UIFont-Solid; font-size: 30px; color: #FFFFFF;}
Then all you have to do in the html/view is add the class to the element and put the name of the icon as text inside of the element:
<div class="icon">home</div>
You can even put multiple icons in the same div:
<div class="icon">home search help</div>
Note that this may not work in production unless you add the font to the fonts folder and reference it in the css using #font-face.
Related
I'm going crazy with this.
Using bootstrap for rails + less-rails gem and some styles are completely different on development and production.
Example:
a styles do have a black background-color on the hover event. I overwrote the a:hover style already via
background-color: none !important;
but it still shows up this weird black background on the hover event. Inspecting the element via Chrome does not even show this CSS style! So where does it come from?
Also, the font is different (dev vs live) and other minor things.
On the other hand, buttons and most major elements (well, lead etc etc) are working fine.
Where does this difference come from and how do I make dev versus live the same CSS appearance?
I deploy my app on heroku btw.
Thanks for any help.
I think you are using other style on your application, something like a scaffold for generator, scaffold will generate scaffold css. I'm use scaffold and i'm having scaffold.css.scss on my apps, Here's style of link on scaffold.css.scss
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
You should remove style of link or you can remove scaffold style on your apps if you won't it.
Twitter bootstrap do not have style link with a black background, by default.
If you don't have other style on your app and only use twitter bootstrap you should find style of link that bring about an issue
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
Is it possible to add an icon of some kind next to a jQuery Mobile select menu in the image below? If so, what would be the image size required? Thanks in advance!
You can add icons to just about anything by adding the following parameters to the element you want to icon to appear within:
data-icon="arrow-l" data-iconpos="left"
Where arrow-l specifies an arrow pointing left.
If you want to specify your own icon/image rather than use one provided by jQuery Mobile, then you can add an image inside the li (before your text), with a class of either ui-li-icon or ui-li-thumb :
<li>
<img src="images/gf.png" alt="France" class="ui-li-icon">
Social Triangle
</li>
ui-li-icon, appears to be restricted to 16px X 16px, and uses the following css conditions:
ui-li-icon {
max-height: 16px;
max-width: 16px;
}
ui-li-thumb, appears to be restricted to 80px X 80px, and uses the following css conditions:
.ui-li-thumb {
max-height: 80px;
max-width: 80px;
}
If you take a look at the above links to the jQuery Mobile documentation, it shows you how to use them in more detail, just check the source:
To apply behavior: url(PIE.htc); to all css files in the project seams to be very long story and with each new version i need to repeat it again.
Is there jquery ui CSS3Pie versions i can find somewhere?
OR
Is it possible to add CSS3Pie support in separate css file, so in such case it will be possible to use that css for any new jquery ui version.
I am trying to do such fix for jquery UI that in my custom css:
.ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-bottom { behavior: url("PIE.htc"); }
.ui-corner-all, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { behavior: url("PIE.htc"); }
But it is not working.
At the same time such fix working for my styles, for example if a have style
.mystyle
{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid 2px #36405c;
}
Than i could define this and it will be working:
.mystyle
{
behavior: url("PIE.htc"); /*it will be working*/
}
So i am assuming that it is not working in jquery UI case because jquery UI has multiple places with .ui-corner-* declarations with different radiuses.
Anyway is it possible to do something with that?
Any ideas someone?
You could create your own theme with http://jqueryui.com/themeroller/, set all the border-radius to 0 and then apply your styles to ".ui-corner-all"
I am able to remove the left nav bar with this code:
.ms-nav {width: 0px;}
.ms-navframe {display:none;}
.ms-quicklaunchouter{width:0px;}
.ms-recyclebin {display:none;}
.ms-TitleAreaFrame {display:none;}
.ms-titlearealeft {display:none;}
.ms-titlearea {display:none;}
.ms-pagetitle {display:none;}
but it adds a left space that takes up half of the page to my edit/create/view all content pages/check-in/etc. I was able to fix this with a Content Editor Web Part (CEWP), but I would like to know if there is a way to do this in a .css file to use throughout the entire site. I have over 100 pages and would rather not have to add a CEWP to each page.
Thanks For The Help.
How about:
.ms-leftareacell {background-color:#D6E8FF;}
.ms-nav {display:none;}
And yes, you can create a CSS file and upload it to Style Library. Then go into Site Settings > Master Page (under Look and Feel) and have Alternate CSS URL point to your CSS file in the Style Library.
The accepted solution is good, but you can get a better result like this:
.ms-nav { display:none; }
.ms-leftareacell {
background-color: #83B0EC;
background-image: url("/_layouts/images/navshape.jpg");
background-repeat: no-repeat;
background-position: -143px 0px;
}