I have recently used the awesome font icon codes to replace text in a navigation link on my sqaurespace site. The icon appears fine however i get this weird " /> symbols appear at the start and end of the page linked with the awesome font icon. Also the code of the awesome font icon (instagram) appears on the tab on which my website is open instead of the icon or simply the text. I am using Safari. Could really use some help with this especially with my practically non-existent knowledge of coding. Appreciate any ideas you might have!
Thanks!
Stephanie
Related
I've tried searching for this, and the closest related question that I could find was from 3+ years ago and had to do with the incognito window being dark, while a normal chrome window was light back then.
Now that we have the ability to have a light or dark mode browser, it's hard to find an icon design and color that looks good for both light and dark modes. Here's an example:
In the image above you can see that the first and third icons are black, so they are hard to see when using dark-mode. The middle icon (the one I'm using for my extension)looks great on dark mode, but terrible on light mode. See below:
So does anyone know if there is there a way to detect the browser mode (light or dark) and swap out the icon?
Thanks to wOxxOm I was able to figure this out.
First, I needed to create a content script (which I called toggleIcon.js) and add it to the manifist.json file.
Then I added the following to toggleIcon.js - which sends scheme: "dark" to my background.js file if window.matchMedia matches prefers-color-scheme: dark.
Then in my background.js file I listen for that message, and if request.scheme == "dark" I use chrome.broserAction.setIcon to change the paths for each of my icons to the dark version.
This effectively overrides my original icon paths as declared in the manifest.json file (as shown below).
The only downside I see is that this requires a content_script, which if you want your extension to work on any page, requires you to also add "matches": ["<all_urls>"] to your extension, which slows down the approval process. Which is why in my comments above I mentioned I had been avoiding using a content_script.
Also, I think it makes sense to use the version of your icons that work best on light-mode as your default, because I think the chrome extension page will pull from these for some of the icons they use (and that page has a white background). As an example, here's how my old icon looked (not enough contrast).
Hopefully this helps someone else!!
I just started developing an extension earlier today and when I checked how it would look within the browser I noticed these white spaces at the top and bottom. I noticed similar but smaller spaces in other chrome extensions I have. I can't seem to find anything online about it. Does anyone know what's going on and how I can fix it?
Here's a picture for reference:
image that shows a picture of extension
The white space at the right side isn't part of the problem it was just the way I captured the picture.
--Question was answered by wOxxOm in comments below.
I am using Bigcommerce and their them Corner Stone.
How do I increase the size of the "SEARCH" text font?
I attached a screen shot image with a blue circle showing where the "search" text is.
Screen Shot
Thank you
Depending on your theme, you may be able to make this change by navigating to Storefront > My Theme in your back office.
However, it's likely that the font size for that one component is the same for the rest of them; in that case, you may have to make manual changes to the CSS stylesheets by editing your theme files.
Can I put a HTML code in my chrome extension's icon? According to the Google API (setBadgeText) this isn't possible.
Is there any way to put it there?
While .setBadgeText is, as implied by name, text-only, you can draw anything and set that as your icon.
You'll need to draw on a <canvas>, extract image data and use .setIcon({imageData: /*...*/}) to update the icon.
See this question for a brief example, and maybe this article.
It's not quite "using HTML", but with some work you can output anything to your icon.
Badge is plain text only as can be seen in source code. There's no way around.
How do you change the text within the extension library dialog box? No matter what I do, the text remains the same size. I can see the font change in the designer cleint but not in the browser. I tried looking at it with IE Developer Tools but I can't even see the text anywhere.
I have no idea what was going on yesterday but it just wasn't working. I was simply trying to set the text size of a computed field inside a dialog box. I changed the font size in the properties of the computed field and seems to work now, We have seen these issues on our dev server before.
I am not sure if you can change the text with text options but you can if you use HTML, and it should also work with CSS.
Standard <h1><h2><h... oh you get the idea works for me.