我正在尝试更改JS树中的图标。在CSS background属性中将图标作为png链接提供时,它正在工作。以下是所使用的CSS。
li.jstree-open > .jstree-icon { background:url("http://jstree.com/tree-icon.png") 0px 0px no-repeat !important;
} //Working
li.jstree-closed > .jstree-icon { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAACnCAYAAAB0FkzsAAAFA0lEQVR4nO3dz4ocVRiG8Tcha9cuSnHRd6BIEIKoiBsXutLsQiR4CW4sXPRliJI7UNyJRBAhSFCvoAghaVyL6zBxMfWZcdI9U1Vd59Rb5zw/6M1Mc/o09fSZ6a4/feWZnglwdHXpCQCHECdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsXVt6AiXYbna3Jb0n6UTSvbZr7i47ozJc4fvWp9tudi9J+k7Su+d+9bOkj9uu+Sf/rMpBnBP1Yd6T9MaBuzyQ9D6BTsf/nBMMCFOS3pT0U39fTECcIw0MMxDoEYhzhJFhBgKdiDgHmhhmINAJiHOAI8MMBDoScV5ipjADgY5AnBeYOcxAoAMR5wGJwgwEOgBx7pE4zECglyDOczKFGQj0AsR5RuYwA4EeQJy9hcIMBLoHcWrxMAOBnlN9nCZhBgI9o+o4zcIMBNqrNk7TMAOBqtI4zcMM1QdaXZwrCTNUHWhVca4szFBtoNXEmSHMR/0thSoDrSLOTGG+3d8eJXqM6gItPs5cYbZd87jtmsci0NkUHWfOMOMHBDqfYuNcIsxAoPMoMs4lwwwEerzi4nQIMxDocYqK0ynMQKDTFROnY5iBQKcpIk7nMAOBjrf6ONcQZiDQcVYd55rCDAQ63GrjXGOYgUCHWWWcGcJ8qERhBgK93OrizBTmOynDDAR6sVXFWVKYgUAPW02cJYYZCHS/VcRZcpiBQF9kH2cNYQYC/T/rOGsKMxDoc7Zx1hhmINBTlnHWHGYgUMM4CfO52gO1ipMwX5Qp0B8dA7WJkzAPyxDodRkGavHFrBn3le8SjZ/FdrN7VdIvkl5L9BC/SfrA5ctkF185CXO42lbQReMkzPFqCnSxOAlzuloCXSROwjxeDYFmj5Mw51N6oFnjJMz5lRxotjgJM51SA80SJ2GmV2KgyeMkzHxKCzRpnISZX0mBJouTMJdTSqBJ9q1vN7trkn7V6ZNIgTAHyLAv/r6kG23XnKQYPNXK+ZUIc3EZVtC3JH2ZaOxkcX6aaFzCHClDoDcTjZsszpcTjEmYEyUONMW2lpQuzt9nHo8wj5Qw0Lm39X9SxfmFpKczjUWYM0kQ6FOdbuskksTZds0DSZ9LOvZdHGHObMZATyTdabvmz6MndUCyzznbrvlWxwVKmInMEOiJpM/arrk715z2SX4O0Xazuy3pa417IRBmBhM/B80SppRh33q/gt7R8BWUMDOZsIJmC1PKdFTSiEAJM7MRgWYNU8p8avB2s7sl6Rvtf1EQ5oIu+ROfPUwp85Hw/ZO7Ken8edH3RZiL6lfQGzo9d/2svyV9kjtMaaGLKmw3u0bSh5JekfSHpO9THTyAcbab3VVJH0l6XdITST+0XfPXEnOxuOIHsM/iV/wADiFO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2PoXynrWkNPDmAUAAAAASUVORK5CYII=") !important;
background-position: 0px 0px !important;
background-repeat: no-repeat !important;
} //not working
数据代码是我从一个在线转换网站http://fatopng.com/fontawesome-to-base64获得的fa-angle-up图标的
完整的代码示例在代码笔https://codepen.io/JGSpark/pen/XGEZRe
中我不确定为什么在一种情况下而不在另一种情况下不应用样式。
有人可以找出答案吗?我已经检查了两个多小时。
答案 0 :(得分:2)
只需从css中删除>,即可:
li.jstree-closed .jstree-icon { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKcAAACnCAYAAAB0FkzsAAAFA0lEQVR4nO3dz4ocVRiG8Tcha9cuSnHRd6BIEIKoiBsXutLsQiR4CW4sXPRliJI7UNyJRBAhSFCvoAghaVyL6zBxMfWZcdI9U1Vd59Rb5zw/6M1Mc/o09fSZ6a4/feWZnglwdHXpCQCHECdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsESdsXVt6AiXYbna3Jb0n6UTSvbZr7i47ozJc4fvWp9tudi9J+k7Su+d+9bOkj9uu+Sf/rMpBnBP1Yd6T9MaBuzyQ9D6BTsf/nBMMCFOS3pT0U39fTECcIw0MMxDoEYhzhJFhBgKdiDgHmhhmINAJiHOAI8MMBDoScV5ipjADgY5AnBeYOcxAoAMR5wGJwgwEOgBx7pE4zECglyDOczKFGQj0AsR5RuYwA4EeQJy9hcIMBLoHcWrxMAOBnlN9nCZhBgI9o+o4zcIMBNqrNk7TMAOBqtI4zcMM1QdaXZwrCTNUHWhVca4szFBtoNXEmSHMR/0thSoDrSLOTGG+3d8eJXqM6gItPs5cYbZd87jtmsci0NkUHWfOMOMHBDqfYuNcIsxAoPMoMs4lwwwEerzi4nQIMxDocYqK0ynMQKDTFROnY5iBQKcpIk7nMAOBjrf6ONcQZiDQcVYd55rCDAQ63GrjXGOYgUCHWWWcGcJ8qERhBgK93OrizBTmOynDDAR6sVXFWVKYgUAPW02cJYYZCHS/VcRZcpiBQF9kH2cNYQYC/T/rOGsKMxDoc7Zx1hhmINBTlnHWHGYgUMM4CfO52gO1ipMwX5Qp0B8dA7WJkzAPyxDodRkGavHFrBn3le8SjZ/FdrN7VdIvkl5L9BC/SfrA5ctkF185CXO42lbQReMkzPFqCnSxOAlzuloCXSROwjxeDYFmj5Mw51N6oFnjJMz5lRxotjgJM51SA80SJ2GmV2KgyeMkzHxKCzRpnISZX0mBJouTMJdTSqBJ9q1vN7trkn7V6ZNIgTAHyLAv/r6kG23XnKQYPNXK+ZUIc3EZVtC3JH2ZaOxkcX6aaFzCHClDoDcTjZsszpcTjEmYEyUONMW2lpQuzt9nHo8wj5Qw0Lm39X9SxfmFpKczjUWYM0kQ6FOdbuskksTZds0DSZ9LOvZdHGHObMZATyTdabvmz6MndUCyzznbrvlWxwVKmInMEOiJpM/arrk715z2SX4O0Xazuy3pa417IRBmBhM/B80SppRh33q/gt7R8BWUMDOZsIJmC1PKdFTSiEAJM7MRgWYNU8p8avB2s7sl6Rvtf1EQ5oIu+ROfPUwp85Hw/ZO7Ken8edH3RZiL6lfQGzo9d/2svyV9kjtMaaGLKmw3u0bSh5JekfSHpO9THTyAcbab3VVJH0l6XdITST+0XfPXEnOxuOIHsM/iV/wADiFO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2CJO2PoXynrWkNPDmAUAAAAASUVORK5CYII=") !important;