Response title
This is preview!
Move this topic
is font awesome support planned for jqm 1.4?
in Developing jQuery Mobile
•
9 years ago
I see that jqm 1.4 alpha added support for svg icons. Font awesome also exists in svg form, but not sure how to use it with jqm 1.4. So far we have been struggling to use fontawesome using the great project fontawesome jqm icon pack. The trouble with it is that it does not override the default icons which are in png files. We are looking for a better solution that avoids using png files altogether.
1
Replies(7)
Re: is font awesome support planned for jqm 1.4?
9 years ago
I had no problems overriding JQM icons with Font Awesome in JQM 1.3.2.
Here is the CSS I used - with fallback JQM icons:
- /* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('css/fontawesome/font/fontawesome-webfont.eot?v=3.2.0'); /* IE9 Compat Modes */
src: url('css/fontawesome/font/fontawesome-webfont.eot?#iefix&v=3.2.0') format('embedded-opentype'), /* IE6-IE8 */
url('css/fontawesome/font/fontawesome-webfont.woff?v=3.2.0') format('woff'), /* Modern Browsers */
url('css/fontawesome/font/fontawesome-webfont.ttf?v=3.2.0') format('truetype'), /* Safari, Android, iOS */
url('css/fontawesome/font/fontawesome-webfont.ff#fontawesomeregular?v=3.2.0') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
/* FONT AWESOME CORE
* -------------------------- */
/* hide JQM icons */
.ff .ui-icon, .ff .ui-icon-searchfield:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
}
.ff [class^="ui-icon-"],
.ff [class*=" ui-icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
.ff [class^="ui-icon-"]:before,
.ff [class*=" ui-icon-"]:before {
text-decoration: inherit;
display: inline-block;
cursor: default;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.ff .icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
/* makes sure icons active on rollover in links */
.ff a [class^="ui-icon-"],
.ff a [class*=" ui-icon-"] {
display: inline;
}
/* increased font size for icon-large */
.ff [class^="ui-icon-"].icon-fixed-width,
.ff [class*=" ui-icon-"].icon-fixed-width {
display: inline-block;
width: 1.1428571428571428em;
text-align: right;
padding-right: 0.2857142857142857em;
}
.ff [class^="ui-icon-"].icon-fixed-width.icon-large,
.ff [class*=" ui-icon-"].icon-fixed-width.icon-large {
width: 1.4285714285714286em;
}
.ff .icons-ul {
margin-left: 2.142857142857143em;
list-style-type: none;
}
.ff .icons-ul > li {
position: relative;
}
.ff .icons-ul .icon-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
text-align: center;
line-height: inherit;
}
.ff [class^="ui-icon-"].hide,
.ff [class*=" ui-icon-"].hide {
display: none;
}
.ff .icon-muted {
color: #eeeeee;
}
.ff .icon-light {
color: #ffffff;
}
.ff .icon-dark {
color: #333333;
}
.ff .icon-border {
border: solid 1px #eeeeee;
padding: .2em .25em .15em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.ff .icon-2x {
font-size: 2em;
}
.ff .icon-2x.icon-border {
border-width: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.ff .icon-3x {
font-size: 3em;
}
.ff .icon-3x.icon-border {
border-width: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.ff .icon-4x {
font-size: 4em;
}
.ff .icon-4x.icon-border {
border-width: 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.ff .icon-5x {
font-size: 5em;
}
.ff .icon-5x.icon-border {
border-width: 5px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.ff .pull-right {
float: right;
}
.ff .pull-left {
float: left;
}
.ff [class^="ui-icon-"].pull-left,
.ff [class*=" ui-icon-"].pull-left {
margin-right: .3em;
}
.ff [class^="ui-icon-"].pull-right,
.ff [class*=" ui-icon-"].pull-right {
margin-left: .3em;
}
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.ff .icon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: -35%;
}
.ff .icon-stack [class^="ui-icon-"],
.ff .icon-stack [class*=" ui-icon-"] {
display: block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
font-size: 1em;
line-height: inherit;
*line-height: 2em;
}
.ff .icon-stack .icon-stack-base {
font-size: 2em;
*line-height: 1em;
}
/* Animated rotating icon */
.ff .icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
.ff a .icon-spin {
display: inline-block;
text-decoration: none;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
/* Icon rotations and mirroring */
.ff .icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.ff .icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.ff .icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.ff .icon-flip-horizontal:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.ff .icon-flip-vertical:before {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/* ensure rotation occurs inside anchor tags */
.ff a .icon-rotate-90:before,
.ff a .icon-rotate-180:before,
.ff a .icon-rotate-270:before,
.ff a .icon-flip-horizontal:before,
.ff a .icon-flip-vertical:before {
display: inline-block;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.ff .ui-icon-glass:before {
content: "\f000";
}
.ff .ui-icon-music:before {
content: "\f001";
}
.ff .ui-icon-search:before,
.ff .bare_filter .ui-icon-searchfield:after,
.ff .blank_filter .ui-icon-searchfield:after {
content: "\f002";
}
.ff .ui-icon-envelope-alt:before {
content: "\f003";
}
// --- removed a large chunk so this post passes ----
.ff .ui-icon-renren:before {
content: "\f18b";
}
/* map JQM icons to fontawesome icon names - we skip retina, because
a retina device should support SVG...*/
.ui-icon-plus, .ui-icon-list-ol {
background-position: -1px -1px;
}
.ui-icon-minus {
background-position: -37px -1px;
}
.ui-icon-remove, .ui-icon-power-off {
background-position: -73px -1px;
}
.ui-icon-caret-right,
.ui-icon-angle-right,
.ui-icon-double-angle-right {
background-position: -108px -1px;
}
.ui-icon-caret-left,
.ui-icon-angle-left,
.ui-icon-double-angle-left {
background-position: -144px -1px;
}
.ui-icon-caret-up,
.ui-icon-sort {
background-position: -180px -1px;
}
.ui-icon-caret-down,
.ui-icon-sort {
background-position: -216px -1px;
}
/*
.ui-icon-check {
background-position: -252px -1px;
}
*/
.ui-icon-cog,
.ui-icon-cogs,
.ui-icon-comments {
background-position: -288px -1px;
}
.ui-icon-refresh {
background-position: -323px -1px;
}
/*
.ui-icon-forward {
background-position: -360px -1px;
}
.ui-icon-back {
background-position: -396px -1px;
}
*/
.ui-icon-inbox,
.ui-icon-shopping-cart {
background-position: -432px -1px;
}
.ui-icon-star,
.ui-icon-group,
.ui-icon-tags {
background-position: -467px -1px;
}
.ui-icon-bug {
background-position: -503px -1px;
}
.ui-icon-globe,
.ui-icon-info,
.ui-icon-desktop,
.ui-icon-file-text-alt,
.ui-icon-question {
background-position: -539px -1px;
}
.ui-icon-home {
background-position: -575px -1px;
}
.ui-icon-search,
.ui-icon-searchfield:after {
background-position: -611px -1px;
}
/*
.ui-icon-checkbox-on {
background-position: -647px -1px;
}
.ui-icon-checkbox-off {
background-position: -683px -1px;
}
.ui-icon-radio-on {
background-position: -718px -1px;
}
.ui-icon-radio-off {
background-position: -754px -1px;
}
*/
.ui-icon-reorder {
background-position: -788px -1px;
}
.ui-icon-edit {
background-position: -824px -1px;
}
Beware, I had to leave away most of the icon declarations, because the post would have been to long.
To use... just use `data-icon="foo"` and don't forget to specify a fallback JQM icon.
thank you @frequent!
what worries me is it is quite a bit of css, must be hard to maintain it when icon pack changes, and it does all the time. Is your fix based on the recent master branch of fontawesome icon pack for jqm or the branch update-3.2.0?
what worries me is it is quite a bit of css, must be hard to maintain it when icon pack changes, and it does all the time. Is your fix based on the recent master branch of fontawesome icon pack for jqm or the branch update-3.2.0?
Leave a comment on frequent's reply
Re: is font awesome support planned for jqm 1.4?
9 years ago
I use Font Awesome to replace all icons. However, I don't provide fallback, because this is for a native iOS and Android app, and icon fonts are supported on all versions that our app supports.
It's true that Font Awesome Icon Pack doesn't replace the standard icons. I had to modify the CSS file. At the same time, I corrected some alignment issues.
right, I do not need png fallback either. @watusiware, is your CSS file change small and maintainable? If so, care to share it or may be even submit as a pull request to jqm fontawesome icon pack?
Leave a comment on watusiware's reply
Re: is font awesome support planned for jqm 1.4?
9 years ago
The exact CSS we use wouldn't be useful to others, because we have modified jQuery Mobile CSS to state most units in ems rather than pixels, and so the Icon Pack CSS is meant to work with that modified CSS.
However, it's rather trivial to do this. You just have to add some lines in the section at the end starting with .ui-icon-cloud-download:before, etc.
Find the icon you'd like to substitute for a built-in one, and then just add lines:
Then you need to disable the background images. This snippet should be useful. Note that this is SCSS and so uses some SCSS variables I've defined:
However, it's rather trivial to do this. You just have to add some lines in the section at the end starting with .ui-icon-cloud-download:before, etc.
Find the icon you'd like to substitute for a built-in one, and then just add lines:
.ui-icon-gear:before,
.ui-icon-cog:before { content: "\f013"; }
Sometimes you need to make adjustments:
.ui-icon-arrow-r:before,
.ui-icon-chevron-right:before { content: "\f054"; margin-left: 5%; }
(you'd probably want to do this in pixels, though)
Then you need to disable the background images. This snippet should be useful. Note that this is SCSS and so uses some SCSS variables I've defined:
.ui-icon {
width: $discDiameter !important;
height: $discDiameter !important;
text-align: center;
-webkit-border-radius: $discRadius;
-moz-border-radius: $discRadius;
border-radius: $discRadius;
line-height: $discDiameter;
background-image: none !important;
background-position: inherit !important;
-webkit-background-size: inherit !important;
-moz-background-size: inherit !important;
background-size: inherit !important;
background-repeat: inherit !important;
}
Leave a comment on watusiware's reply
Re: is font awesome support planned for jqm 1.4?
9 years ago
DotCastle shared a new resource for using font awesome icons in jQuery mobile. This is similar to the CommaDelimited's Font Awesome kit, but some issues with that pack are fixed in this new resource
Article & Info: http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile/
The font awesome icons are provided as a separate set (using a prefix for icon names 'fa-') instead of overwriting the existing jqm icons. So the new kit can be used alongside of jqm built-in icons. If you do not want to use jqm icons at all, just build a jqm download without including the icons and use this font awesome kit instead.
Leave a comment on DotCastle's reply
Re: is font awesome support planned for jqm 1.4?
9 years ago
^ Yes, note that Font Awesome changed their icon names starting with the 4.0 version. They used to be prefixed with icon-, now they are prefixed with fa-.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to gene.vayngrib's question