I'm trying to use Icomoon in my blazor project. I've already downloaded the icons.
HTML
<button class="search__button">
<svg class="search__button__icon">
<use xlink:href="img/icons/symbol-defs.svg#magnifying-glass.svg"></use>
</svg>
</button>
CSS
.search__button {
&__icon {
color: #444444;
width: 1.75rem;
height: 1.75rem;
}
}
The location of the SVG files
The result I'm getting
Am I missing something? I think to have followed what it's said in the documentation.
Thanks for helping
EDIT
In this documentation is says that the svg icon can be used as an image like this:
<img class="nav__level-item__icon" src="img/icons/svg/home.svg" alt="home">
When used like this, it's displaying.
&__icon {
width: 1.75rem;
height: 1.75rem;
fill: #fff; //and/or color: #fff
}
The only problem with using it as an image is that I can't style it. So, at the end, I'm still stuck.
EDIT 2
I tried to implement what's suggested in this blog post. Icons are being displayed, I can't still style them.
According to Microsoft SVG use is a still limited, in this Microsoft document it states
If you place an <svg> tag directly into a component file (.razor), basic image
rendering is supported but many advanced scenarios aren't yet supported. For
example, <use> tags aren't currently respected
If you use a string variable for the xlink:href attribute the icon will render after pre-rendering but would disappear as soon as the Blazor library was loaded in the client, but looks like there is a workaround.
Instead of putting the svg and use tags in the .razor file you can return a MarkupString instead, something like
<i class="icon">
#IconMarkupString
</i>
#code {
[Parameter]
public string IconSprite { get; set; }
private MarkupString IconMarkupString
{
get => new MarkupString($"<svg class='icon-sprite'><use xlink:href='{IconSprite}'/></svg>");
}
}
Then used like
<SVGIcon IconSprite="img/icons/symbol-defs.svg#magnifying-glass" />
One thing that I did notice was in order to get the styling to work on the SVG element itself I had to add a separate class to the SVG tag otherwise the styling would not be applied even when using ::deep.
Related
Let's assume that the user can add styles for every component in admin panel and I get it as string in my Node server:
const stylesFromAPI = ".p { color: red } .bg { background: lime }";
How to prefix this styles before append to my document to avoid conflicts?
I need something like CSS modules but working with strings (not as module loader):
const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />
produces:
<style>
.hashedClassname685946898456 .p { color: red }
.hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>
Shadow DOM seems like a reasonable option here. You can create your style tags with inside the shadow DOM without having to deal with any selector prefixes. For example, using the react-shadow package:
import root from 'react-shadow';
Then in JSX, something like:
<root.div>
<style type="text/css">
{/* CSS string here */}
</style>
<div>
{/* Stuff here */}
</div>
</root.div>
Check out a working example of this here: https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom
The main downside here is your styles from outside the shadow DOM will not apply. Those using the shadow DOM for components see this as a good thing, those simply trying to scope CSS do not. Not sure what it is you're scoping, so I can't really tell if that would be an issue for you.
If it is, you could re-import your styles within the shadow DOM, though I can't really point out how to do that without knowing what bundler is in use and how it is in use.
Alternatively you could pull apart your imported CSS using the css package, iterate over the selectors prefixing all with a randomly generated class, and then re-stringify.
I don't have much experience on UI development. I have a class defined in CSS, something like this-
.myclass {
color: red;
content: "my content";
font-size: 12px;
padding-right: 2px;
}
I want "my content" value to be internationalized (to be displayed as my content in English and something else in another language). Is that possible achieve it through CSS code?
I would suggest to separate your localization from CSS, since it is primarily meant for styling and you'll be probably localizing the HTML anyway. If it is possible for your to add another attribute to your HTML you could try using content with an attr() value to reference a data attribute from the selected HTML content. So with HTML like this:
<div class="myclass" data-value="My Content"></div>
You can access the data attribute like this:
.myclass:before {
content: attr(data-value);
}
Keep in mind that the content property can only be used on pseudo elements. For further info I'd recommend you the MDN page about the content property.
I am not sure about it but most probably you are looking for this
http://www.w3.org/International/questions/qa-css-lang
The best way to style content by language in HTML is to use the :lang selector in your CSS style sheet. For example:
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
You could consider using CSS variables (i.e. var() with custom properties), if it blends in with your surroundings:
:root{
--text-my-content: "my content";
}
.myclass{
content: var(--text-my-content);
}
Thus, the localized portion is outsourced from the actual style. Now, you can define the locales elsewhere (e.g. generated from a text database or hard-wired in an i18n-only CSS file or even grouped together on the top of your stylesheet):
html[lang="de"]:root{ --text-my-content: "mein Inhalt"; }
html[lang="en"]:root{ --text-my-content: "my content"; }
html[lang="fr"]:root{ --text-my-content: "mon contenu"; }
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I've got a StyleableTextField that displays very basic HTML. To format the HTML I currently use a Stylesheet declared in AS3.
This works fine, but is rather inefficient for the designers to edit colors and stuff, so I need to include these tags in my main CSS.
The AS3 CSS declaration looks like this;
_styleSheet = new StyleSheet();
_styleSheet.setStyle("p", {fontSize:'15',color:'#FFFFFF', fontFamily: 'Courier New', fontWeight:'bold'});
This gets assigned to the StyleableTextField using the usual styleSheet = _styleSheet way.
The main CSS file is declared in my main application like this: <fx:Style source="Main.css"/>.
I already have CSS tags for spark components in my CSS, such like the following;
s|TextInput
{
contentBackgroundAlpha: .5;
contentBackgroundColor: #202020;
focusColor: #e1333a;
}
However, I need to address the very instance of StyleableTextfield in the CSS (I've got other's in my app, but only this one displays HTML text).
Has anyone got an idea how to do this?
Working on a mobile project btw.
Flex supports a CSS id selector.
#instanceID
{
...
}
or
ObjectType#instanceID
{
...
}
I haven't been able to test this thoroughly, but it appeared to work for me:
#_objectName
{
p: pstyle;
}
.pstyle
{
fontSize: 15;
...
}
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');