Response title
This is preview!
Move this topic
Icons disappeared after moved to "without theme" css
in jQuery Mobile
•
8 years ago
Hi guys!
I moved from the default jquery mobile theme to the
"without theme" css because I need to customize the grapich.
However it would be nice to use the standard jquery icon. Can you tell
me how to do it? After I changed the css they have not been shown anymore.
Thanks in advance
1
Replies(8)
The icons are defined in the CSS. Many people use a base CSS, then
override what they like in their site-wide custom CSS file.
Or, you could copy out that part from the default CSS.
JΛ̊KE
Leave a comment on jakecigar's reply
Thanks. Will I have to manually copy and look for them in the css file or is there a place where I can find the buttons and icons css?
Leave a comment on Matteo Foglio's reply
I use 1.4.5. The icons are defined right at the top
of http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css
.
JΛ̊KE
PS
Make sure you copy EVERYTHING that has
to do with icon!
You probably don’t need the /* PNG icons */ and below.
JΛ̊KE
Leave a comment on jakecigar's reply
Actually the first 725 lines are not enought. Any ideas about a software
that can find the needed lines (all .ui-icon) ?
Leave a comment on Matteo Foglio's reply
SOLVED: copy first 930 lines and add a { color: white; }. Works for my
need. Thanks!
Leave a comment on Matteo Foglio's reply
Like I said, most people would include the entire CSS (
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css ). Then
override what they need to change.
JΛ̊KE
Leave a comment on jakecigar's reply
I don't know what you mean by "without theme" CSS. Give us
a file name.
jQuery Mobile isn't mean to be used without a theme. It
needs the following CSS, in this order. Re-arranging the order will
not work correctly:
- icon
- theme
- structure
The default CSS files jquery.mobile-1.4.5.css and jquery.mobile-1.4.5.min.css combines
all these in one.
You also need the images directory, or at least images/icons-png. These
are used for browsers that do not support SVG graphics. The default
CSS uses inline SVG and external PNG. There are other options.
If you do not like the default theme, you can:
- use ThemeRoller to create your own theme
- create a theme file from scratch
- modify the default theme (jquery.mobile.theme-1.4.5.css)
Then you load icon (jquery.mobile.icons-1.4.5.css),
theme, and structure (jquery.mobile.structure-1.4.5.css)
files separately. There are multiple choices of icon CSS file.
What you CANNOT do is eliminate the theme or remove some rules
from the theme file. It is REQUIRED and it MUST be loaded in the
order shown above. The CSS will not work correctly otherwise.
If there are appearance changes you want that cannot be
accommodated in the theme, then you should load your own CSS file
last, and write overrides.
You should not be cutting apart the CSS file and making your
own. That is a formula for trouble.
You certainly can use any CSS minification tool to combine and
minify your icon, theme, and structure CSS into one file.
That's already been done for you. The files are in the .zip . Don't cut-apart the CSS files, that is madness!Or, you could copy out that part from the default CSS.
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 Matteo Foglio's question