Skip to content

Commit 171882f

Browse files
committed
site: copy tweak
1 parent 78e1591 commit 171882f

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<p>While you can easily override a lot of the plugin's styles in your own CSS, you cannot change the flag image dimensions, which are pre-built to a specific size. By default, this is 16x12px, or 32x24px for the retina images. In order to show larger flags, you will need to re-build the images yourself. This is very simple to do.</p>
22

3-
<p>In order to rebuild larger flag images, first follow the <a rel="noopener" href="https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md#changes-to-the-plugin">Contributing</a> guidelines to get the project building (<code>npm run build</code>) without any errors. Now, let's say you want to display the flag images at 24x18px (retina image is 48x36px), as per the demo below. In grunt/generate-sprite.js, update the <code>TARGET_HEIGHT</code> value to 18 (this will automatically be doubled for the retina sprite). Note that whatever height you choose, it must be a multiple of 3. Then run <code>npm run build:img</code> to get the new flag images and updated CSS. At this point you should be able to open the provided demo.html to see the larger flag images. You may then want to override some of the CSS variables/styles in src/css/intlTelInput.scss in order to accommodate the larger flag images, e.g. see <a href="/css/large_flags_overrides.css">the overrides</a> used in this demo.</p>
3+
<p>In order to rebuild larger flag images, first follow the <a rel="noopener" href="https://github.com/jackocnr/intl-tel-input/blob/master/.github/CONTRIBUTING.md#changes-to-the-plugin">Contributing</a> guidelines to download the project and get it building (<code>npm run build</code>) without any errors. Now, let's say you want to display the flag images at 24x18px (retina image is 48x36px), as per the demo below. In grunt/generate-sprite.js, update the <code>TARGET_HEIGHT</code> value to 18 (this will automatically be doubled for the retina sprite). Note that whatever height you choose, it must be a multiple of 3. Then run <code>npm run build:img</code> to generate the new flag images and the updated CSS needed to use them. At this point you should be able to open the provided demo.html to see the larger flag images. You may then want to override some of the CSS variables/styles in src/css/intlTelInput.scss in order to accommodate the larger flag images, e.g. see <a href="/css/large_flags_overrides.css">the overrides</a> used in this demo. When you're happy, you can copy the built flag images and CSS file into your own project, and then just load the standard plugin script as usual.</p>

0 commit comments

Comments
 (0)