I wanted to change the default Vue favicon, so i changed the photo in the public folder to my own .ico image while still naming it as favicon. Except for this, i did no other changes, but it didn't work and still having the old default vue logo icon img, making no sense.
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
I generate a favicon from here and I organize URL and favicon file like the following screenshot.
Generated favicon file work on all modern devices with cross-browser compatibility in my Vue ClI 3 project.
Related
I've created a new application with Vue CLI and I'm using the following code in my index.html to embed an SVG icon.
<link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg">
This on it's own should work without any issues.
However, when Vue builds the application, I can see this line gets commented out in the source code.
Regular (png) icons work just fine without being wrapped in the [if IE] tag.
<!--[if IE]><link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg"><![endif]-->
I would like my original code to be used instead of it being wrapped in the [if IE] tag, is there any way to tell Vue not to edit it?
EDIT: Here's the code to reproduce the issue: https://github.com/CerxMe/vue-icon-bug
I created a Vue 3 web app, featuring Vuex, Vue Router, etc, and I have filled out the manifest and set up PWA features as well. I noticed that in production my favicon is not loading, and the default browser icon is applied.
I checked the "Elements" tab in the Chrome dev tools to find that the reference to my favicon has been wrapped in this if statement for internet explorer.
Example:
<!--[if IE]><link rel="icon" type="image/x-icon" href="/resources/icons/favicon.ico" /><![endif]-->
I have also referenced the icon in my manifest, and given it many options for sizes, even though I only have one size file right now. (256x256)
the "public" folder is working as expected, eg. I can navigate to myapp.com/resources/icons/favicon.ico which returns the file successfully after the build.
When the PWA is installed, it does use the correct sized images from the manifest, installing on Chrome both on desktop and mobile seem to show the icon fine, though those are different assets.
Should I only specify the favicon in index.html or in the manifest instead of both? Is there a setting somewhere in the manifest or in my Vue app that is triggering this "IE if" statement to be applied?
I am still not too keen on this manifest business or with PWAs in general, but I want to create a good client experience, so any information you can point me to would be very appreciated.
Thank you.
I have a photo gallery that has it's own .css and .js file. I'd like to be able to add those to only the gallery page. They server no purpose anywhere else on the site. How I do this in BigCommerce? I can't seem to find the gallery page I created in their file system.
As far as I know, it's not considered best practice, but if you are using the HTML5 Doctype specification, e.g:
<!DOCTYPE html>
Your css doesn't need to be in the of your site. You could add your link to the top of your custom gallery page. If you're adding them through the html editor while editing a page, I believe a relative file path will work for those assets, such as:
<link rel="stylesheet" href="/template/Styles/yourfile.css" />
<script src="/template/Styles/yourfile.js"></script>
If you create a custom page template file you can check the documentation on referencing assets in a theme.
Both files will need to have been uploaded via webdav.
Turns out this is not going to be possible without major edits to the existing CSS but thanks for the help.
Why does video-js setup guide use an absolute path to refer to video-js.swf and not a relative path?
<link href="//example.com/path/to/video-js.css" rel="stylesheet">
<script src="//example.com/path/to/video.js"></script>
<script>
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
The setup guide offers no explanation!
That would seem to be an inconsistency. You should submit a bug.
The main library urls use protocol-relative URLs to avoid security issues, and the swf should probably be the same.
I have an Octopress blog with an installed Octostrap3 theme. Everything works fine so far.
But I've been looking for the last days and I'm not able to find the responsible css files in Octostrap3 to change the colors for my Octopress blog.
Could anybody tell me which css (or scss) files I need to edit?
Ok, i've found a solution that works for me.
tomordonez' hint didn't help in my case (but thank you anyway), because there was just an screen.css in /source/stylesheets, no style.css.
If you have octostrap3 installed, you can use any bootstrap theme. To change the theme, you just have to edit the /source/_includes/custom/head.html and insert the path to the css file for your theme.
I placed my theme-css-file in /source/assets/deg0nz/, so i changed the head.html to:
<link href="{{ root_url }}/assets/deg0nz/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
I have chosen a theme from bootswatch and customized it with their customization procedure. So in the end i just had to change the bootswatch.less, the variables.less and the bootstrap.css in the bootswatch-theme folder and create the min-files.
Instead of doing this you can use any bootstrap.css and place it's path in /source/_includes/custom/head.html like i described above.
Try source/stylesheets/style.css